दिलचस्प पोस्ट
एक आईपीवी 6 पते की शाब्दिक प्रतिनिधित्व की अधिकतम लंबाई? ग्रहण हॉटकी: टैब्स के बीच कैसे स्विच करें? स्थानीयहोस्ट क्रोम और फ़ायरफ़ॉक्स में काम नहीं कर रहा है स्प्रिंग JSF एकीकरण: JSF प्रबंधित बीन में स्प्रिंग घटक / सेवा इंजेक्षन कैसे करें? कैसे एक <iframe> में एक पीडीएफ फाइल खोलने के लिए? कैसे RecyclerView के साथ अंतहीन सूची को लागू करने के लिए? मैं एरेज़ को & a = & b के रूप में क्यों नहीं दे सकता? जर्सी के JSON / JAXB को क्रमबद्ध करने के लिए कैसे उपयोग करें? आइटम्स कंट्रोल में आइटम्स के बीच एक विभाजक कैसे जोड़ा जा सकता है इकाई फ़्रेमवर्क 4.1 कोड प्रथम में एक क्लास प्रॉपर्टी की उपेक्षा करना सभी mysql चयनित पंक्तियों को एक सरणी में प्राप्त करें पायथन में डू-ऑल लूप का अनुकरण करते हैं? सी (चैर, इंट) में सूटिंग पॉइंटर्स मैं कक्षा के बजाय एक स्ट्रैट का उपयोग कब करना चाहिए? मैं PowerShell का उपयोग कर एक पाठ फ़ाइल कैसे विभाजित कर सकता / सकती हूं?

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

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

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

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

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

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

वेब के समाधान से एकत्रित समाधान "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>