क्या jquery और Svg के साथ सीधे काम करना संभव है (कोई प्लगइन्स नहीं)?

मैं एक साथ Jquery और Svg के साथ काम करने की कोशिश कर रहा हूं। लेकिन मैं किसी भी प्लगइन का उपयोग नहीं करना चाहता।क्या jquery और Svg के साथ सीधे काम करना संभव है (कोई प्लगइन्स नहीं)?

अब जिस समस्या का मैं सामना कर रहा हूं वह यह है कि जब मैं svg दस्तावेज़ में कोई बच्चा जोड़ने के लिए पारंपरिक परिशिष्ट मोड का उपयोग करके काम करने का प्रयास करता हूं, तो ऑब्जेक्ट प्रस्तुत नहीं किया जाता है। आइए देखें कि मैंने क्या करने की कोशिश की:

/* Creating the svg container using pure JS */ 
var container = document.getElementById("svg_space"); 
mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
mySvg.setAttribute("version", "1.2"); 
mySvg.setAttribute("baseProfile", "tiny"); 
container.appendChild(mySvg); 

/* Adding a child and setting attributes to the SVG container using pure JS */ 
Circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
Circle.setAttribute("cx", "60"); 
Circle.setAttribute("cy", "30"); 
Circle.setAttribute("r", "13"); 
Circle.setAttribute("class", "class1"); 
    mySvg.appendChild(Circle); /* After this, the circle is rendered */ 

/* Then, I tried to use jQuery to perform the same action... */ 
$(mySvg).append("<circle />"); 
$(mySvg).find("circle").attr("cx","160"); 
$(mySvg).find("circle").attr("cy","70"); 
$(mySvg).find("circle").attr("r","30"); 
$(mySvg).find("circle").attr("class","class1");

... लेकिन इस क्रिया के बाद, सर्कल प्रस्तुत नहीं करता है। मैं जांचता हूं कि कम से कम सर्कल वास्तव में डेवलपर टूल इंस्पेक्टर में डीओएम पेड़ में जोड़ा गया था, और मुझे पता चला कि दोनों तत्व मौजूद हैं, पहले सेट किए गए उचित गुणों के साथ, लेकिन jQuery के साथ बनाया गया सर्कल ऐसा था जैसे यह एक HTML वंशज था , एक एसवीजी वंश के रूप में नहीं। इसका मतलब है कि एक एसवीजी सर्कल तत्व से संबंधित रचनाकार, प्रोटोटाइप और अन्य विधियां इस 'jquery' सर्कल का हिस्सा नहीं थीं, बल्कि इसके बजाय एक शुद्ध HTML टैग से संबंधित थीं।

क्या jgery का उपयोग करते हुए svg वंशजों के रूप में svg तत्व बनाने के लिए कोई तरीका है, या उत्पादकता के नुकसान के बावजूद शुद्ध जावास्क्रिप्ट का उपयोग बेहतर है?

स्रोत

2011-05-27 Jesufer Vn

_> मैं एक साथ Jquery और Svg के साथ काम करने की कोशिश कर रहा हूं। लेकिन मैं किसी भी प्लगइन का उपयोग नहीं करना चाहता हूं ._ - क्या आप कृपया बता सकते हैं क्यों? मौजूदा प्लगइन्स और पुस्तकालयों में अच्छे दस्तावेज, उदाहरण, संरचना है ... उदाहरण के लिए http://keith-wood.name/svg.html पर एक नज़र डालें। – silex

क्या आप जानते हैं कि '.attr()' कुंजी-मूल्य जोड़े के साथ एक जावास्क्रिप्ट ऑब्जेक्ट ले सकता है? जैसे आप केवल $ (mySvg) कर सकते हैं। ढूँढें ("सर्कल")। attr ({cx: 160, cy: 70, r: 30, "class": "class1"}); ' – Domenic

क्या आप IE का उपयोग कर रहे हैं <9 ? –

कोशिश करने में सक्षम नहीं है, लेकिन मुझे लगता है कि यह काम करेगा।

$(mySvg).append("<circle />");

के बजाय क्या

$(mySvg).append(document.createElementNS("http://www.w3.org/2000/svg", "circle"));

आप एक बार की तुलना में इस अधिक कर रही पर योजना बना रहे हैं, हो सकता है

function svgEl(tagName) { 
    return document.createElementNS("http://www.w3.org/2000/svg", tagName); 
} 

$(mySvg).append(svgEl("circle"));

यह $(document.createElement("div")) बजाय के माध्यम से बेहतर प्रदर्शन होने का वर्ष चाल के रूप में ही है $("<div />") का।

स्रोत

2011-05-27 08:28:42 Domenic

मुझे पता है कि आधार "कोई प्लगइन्स नहीं था ", लेकिन यदि आप व्यापक एसवीजी (या अन्य एक्सएमएल) मैंगलिंग करते हैं, तो आप इसे इतना आसान प्यार कर सकते हैं: http://www.rfk.id.au/blog/entry/xmlns-selectors-jquery/ – Boldewyn

' $ (svgEl (टैगनाम)) 'आपको – Leopd

यह क्रोम 11 में काम करता है। अन्य ब्राउज़रों में कोशिश नहीं की है।

$(mySvg).append("<svg><circle /></svg>"); 
$(mySvg).find("circle").unwrap(); 
$(mySvg).find("circle").attr("cx","160"); 
$(mySvg).find("circle").attr("cy","70"); 
$(mySvg).find("circle").attr("r","30"); 
$(mySvg).find("circle").attr("class","class1");

जैसा कि मैं इसे समझता हूं, jQuery ब्राउज़र के मूल HTML पार्सर को स्ट्रिंग पास करके HTML को पार करता है। एचटीएमएल पार्सिंग नियम तत्व और उसके पूर्वजों के तत्वों के आधार पर तत्व को नामस्थान निर्दिष्ट करते हैं, इसलिए एसवीजी नेमस्पेस में सर्कल तत्व प्राप्त करने के लिए इसे एक svg तत्व के अंदर पार्स किया जाना आवश्यक है।

तो यहां, इसे <svg> तत्व के अंदर पार्स किया गया है और संलग्न किया गया है और फिर अनचाहे को अतिरिक्त svg तत्व को निकालने के लिए बुलाया जाता है। यह संलग्न और अनचाहे पैटर्न कुछ हद तक बदसूरत है, और मुझे उम्मीद है कि बेहतर jQuery ज्ञान वाले किसी व्यक्ति को एक अधिक सुरुचिपूर्ण समाधान मिल सकता है, लेकिन अवधारणा पर्याप्त स्पष्ट है।

स्रोत

2011-05-27 08:24:01 Alohci

-4

एक साथ jQuery और एसवीजी का उपयोग न करें। jQuery को डीओएम मैनिपुलेशन के लिए डिज़ाइन किया गया था, राफेल को एसवीजी मैनिपुलेशन के लिए डिज़ाइन किया गया है।

Raphael का उपयोग करें जो एक जावास्क्रिप्ट लाइब्रेरी है जो आपके लिए एसवीजी करता है।

आपको वास्तव में सब कुछ कठिन तरीके से नहीं करना चाहिए, यह सिर्फ समस्याओं का कारण बन रहा है।

स्रोत

2011-05-27 08:40:18 Raynos

जोड़ने से पहले' attr' जैसी विधियों को कॉल करने देता है जो पूरी तरह से सच नहीं है ... http://www.w3.org/TR/SVG/svgdom.html – Planplan

क्या jquery और Svg के साथ सीधे काम करना संभव है (कोई प्लगइन्स नहीं)?

उत्तर

संबंधित मुद्दे