दिलचस्प पोस्ट
जावा में एरे की सरणी कैसे करें क्या एक समग्र फ़ंक्शन के बिना उपयोग किया जा सकता है? एक SQL सर्वर क्वेरी के लिए अधिकतम आकार? खंड में? क्या बेहतर दृष्टिकोण है Bitfields में क्यों एक बिट endianness मुद्दा है? एंड्रॉइड रिस्ट्रॉफ़्ट – प्रगति नोटिफिकेशन दिखाने के लिए प्रगति अद्यतन गतिशील रूप से एपेन्डर फ़ाइल पथ सेट करने का सर्वोत्तम तरीका जावा पूर्णांक अंडरफ्लो और अतिप्रवाह को कैसे संभालता है और आप इसके लिए कैसे जांचेंगे? Android में Google मानचित्र API का उपयोग करके उपयोगकर्ता के स्थान से आस-पास की जगहों के परिणाम प्राप्त करना एंड्रॉइड पार्सलेट योग्य – रिटेलरऑर्डर एक्टिविटी.जावा रिटर्न नल जावास्क्रिप्ट में ऑब्जेक्ट फ़ाइल करने के लिए dataURL कन्वर्ट करने के लिए कैसे? Matplotlib: अन्य ग्राफ तत्वों के पीछे ग्रिड रेखा खींचना गतिविधि खत्म करने के लिए मैं एनीमेशन कैसे जोड़ सकता / सकती हूं? जावा: सिस्टम। एक्सट () को कॉल करने वाले तरीकों का परीक्षण कैसे करें? जावा इंटरफेस और वापसी प्रकार सेगमेंटेशन गलती: ओएस एक्स में 11

jQuery चयनकर्ता + एसवीजी असंगत है?

मैं इनलाइन एसवीजी और जावास्क्रिप्ट एनीमेशन के साथ एक एचटीएमएल 5 दस्तावेज़ के साथ काम कर रहा हूं।

जब उपयोगकर्ता उपयोगकर्ता कहीं भी क्लिक करता है, तो मैं एक बॉक्स पॉप अप करना चाहता हूं, और जब मैं उस बॉक्स को बक्से में जाने के लिए चाहूँगा जो उपयोगकर्ता उस बॉक्स पर न कहीं क्लिक करता है। इसका मतलब है कि मैं $(window).click() उपयोग नहीं कर सकता। क्लिक करें $(window).click() , जो काम करता है

मैंने उन्हें वर्ग के नाम और $(".svgclassname").click() का उपयोग करके शीर्ष पर एसवीजी का चयन करने की कोशिश की है $(".svgclassname").click() , लेकिन यह काम करने में प्रतीत नहीं होता है न तो $("#svgname").click() वाले व्यक्तिगत लोगों का चयन करता है $("#svgname").click()

समस्या क्या है?

(जब मैं $(".eyesvg") को $(window) $(".eyesvg") साथ $(".eyesvg") , जब उपयोगकर्ता खिड़की में कहीं भी क्लिक करता है, तो एक नीला बॉक्स कर्सर के पास दिखाई देता है।)

Solutions Collecting From Web of "jQuery चयनकर्ता + एसवीजी असंगत है?"

ऐसा इसलिए होता है क्योंकि एसवीजी डोम स्पेक एचटीएमएल डोम से काफी अलग है।

एसवीजी डोम एक अलग बोली है, और कुछ गुणों में समान नाम हैं लेकिन इसका अर्थ अलग-अलग बातें है उदाहरण के लिए, एक एसवीजी तत्व का क्लासनाम प्राप्त करने के लिए, आप उपयोग करते हैं:

 svg.className.baseVal 

इस से प्रभावित हुए अच्छे लोग हैं

 className is SVGAnimatedString height,width, x, y, offsetWidth, offsetHeight are SVGAnimatedLength 

ये एनिमेटेड गुण baseVal हैं, साथ ही baseVal आपको एचटीएमएल डोम और animatedVal baseVal मूल्य को पकड़ baseVal हैं, मुझे यकीन नहीं है कि क्या हुआ।

एसवीजी डोम भी कुछ गुण पुस्तकालयों पर निर्भर है, जैसे कि innerHTML

यह कई मायनों में jQuery को तोड़ता है, कुछ भी जो ऊपर गुणों पर निर्भर करता है विफल रहता है।

सामान्य में, एसवीजी डोम और एचटीएमएल डोम बहुत अच्छी तरह से मिश्रण नहीं करते हैं। वे आप में आकर्षण के लिए एक साथ मिलकर काम करते हैं, और फिर चीजें चुपचाप करते हैं, और एक और स्वर्गदूत अपने पंख खो देता है

मैंने थोड़ा jQuery एक्सटेंशन लिखा था जो एसवीजी तत्वों को लपेटता है जिससे कि उन्हें HTML DOM की तरह दिखते हैं

 (function (jQuery){ function svgWrapper(el) { this._svgEl = el; this.__proto__ = el; Object.defineProperty(this, "className", { get: function(){ return this._svgEl.className.baseVal; }, set: function(value){ this._svgEl.className.baseVal = value; } }); Object.defineProperty(this, "width", { get: function(){ return this._svgEl.width.baseVal.value; }, set: function(value){ this._svgEl.width.baseVal.value = value; } }); Object.defineProperty(this, "height", { get: function(){ return this._svgEl.height.baseVal.value; }, set: function(value){ this._svgEl.height.baseVal.value = value; } }); Object.defineProperty(this, "x", { get: function(){ return this._svgEl.x.baseVal.value; }, set: function(value){ this._svgEl.x.baseVal.value = value; } }); Object.defineProperty(this, "y", { get: function(){ return this._svgEl.y.baseVal.value; }, set: function(value){ this._svgEl.y.baseVal.value = value; } }); Object.defineProperty(this, "offsetWidth", { get: function(){ return this._svgEl.width.baseVal.value; }, set: function(value){ this._svgEl.width.baseVal.value = value; } }); Object.defineProperty(this, "offsetHeight", { get: function(){ return this._svgEl.height.baseVal.value; }, set: function(value){ this._svgEl.height.baseVal.value = value; } }); }; jQuery.fn.wrapSvg = function() { return this.map(function(i, el) { if (el.namespaceURI == "http://www.w3.org/2000/svg" && !('_svgEl' in el)) return new svgWrapper(el); else return el; }); }; })(window.jQuery); 

यह एसवीजी ऑब्जेक्ट के चारों ओर एक आवरण बनाता है जो उन्हें jQuery के HTML DOM जैसा दिखता है। मैंने अपने एसवीजी तत्व droppable बनाने के लिए jQuery-UI के साथ इसका उपयोग किया है

एचटीएमएल और एसवीजी के बीच डोम अंतर की कमी एक कुल आपदा है। एचटीएमएल के लिए लिखी गई सभी मीठी उपयोगिता पुस्तकालयों को एसवीजी के लिए पुनरीक्षित किया जाना है।

कभी-कभी मुझे यह नहीं मिलता … लेकिन वास्तव में यह कक्षा चयनकर्ता के साथ काम नहीं करता है यदि आप id $ ("# mysvg") या $ $ ("svg") का उपयोग करते हैं, तो यह काम करता है! अजीब….

और यह केवल तभी काम करता है जब आप onClick स्क्रिप्ट को शीर्षक से svg तत्व के बाद शरीर में ले जाते हैं! jquery केवल onclick बाध्य कर सकते हैं जब तत्व बंधन से पहले घोषित किया गया है।

यू jquery-svg प्लगइन उपयोग कर सकते हैं, एक आकर्षण की तरह:

 <script> //get svg object, like a jquery object var svg = $("#cars").getSVG(); //use jquery functions to do some thing svg.find("g path:first-child()").attr('fill', color); </script>