2010-01-28 7 views
6

मेरे पास एक HTML फ़ाइल है, मैं इसे गतिशील रूप से एक तत्व जोड़ रहा हूं, फिर एक आयताकार। विभिन्न ब्राउज़रों में अच्छी तरह से काम करता है (आईई अनदेखा)। जब मैं गतिशील रूप से तत्व बनाने के लिए एक ही विधि का उपयोग करने का प्रयास करता हूं, तो यह केवल ओपेरा में क्रोम या सफारी में काम नहीं करता है। क्या मेरा वाक्यविन्यास गलत है, या वेबकिट शायद रनटाइम पर तत्व जोड़ने का समर्थन नहीं करता है? (यदि मैं इसे टैग अप-फ्रंट के रूप में घोषित करता हूं तो वही तत्व ठीक काम करता है)। शायद मुझे इन प्रकार के नोड्स के साथ appendChild() का उपयोग नहीं करना चाहिए? मेरे पास यह है कि, मुझे इसे एक HTML फ़ाइल में डंप करने और इसे चलाने में सक्षम होना चाहिए। किसी को भी किसी भी विचार है कि इस के चारों ओर एक तरीका है है, तो यह बहुत अच्छा होगा:रनटाइम पर मेरे दस्तावेज़ में अधिक svg तत्व जोड़ना

<html> 
<head> 
    <script> 

    window.onload = function() { 
     var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
     svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); 
     svg.setAttribute('version', '1.1'); 
     svg.setAttribute('width', '800px'); 
     svg.setAttribute('height', '400px'); 
     document.body.appendChild(svg); 

     var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 
     rect.setAttribute("id", "myrect"); 
     rect.setAttribute("fill","red"); 
     rect.setAttribute("stroke","black"); 
     rect.setAttribute("stroke-width","5"); 
     rect.setAttribute("x", "100"); 
     rect.setAttribute("y", "100"); 
     rect.setAttribute("width", "100"); 
     rect.setAttribute("height", "50"); 
     svg.appendChild(rect); 

     var anim = document.createElementNS('http://www.w3.org/2000/svg','animate'); 
     anim.setAttribute("attributeName", "width"); 
     anim.setAttribute("from", "100"); 
     anim.setAttribute("to", "400"); 
     anim.setAttribute("dur", "10s"); 
     anim.setAttribute("begin", "0s"); 
     anim.setAttribute("fill", "freeze"); 
     rect.appendChild(anim); 
    } 

</script> 
</head> 

<body> 
</body> 

उत्तर

4

आप वास्तव में setAttributeNS(null, ...) जब नाम स्थान का उपयोग कर document.createElementNS() की तरह कॉल का उपयोग करना चाहिए।

xmlgraphics.apache.org/batik/faq.html

हालांकि, यह पता चला है कि कुछ कार्यान्वयन setAttribute (एक्स, वाई) और setAttributeNS (शून्य, एक्स, वाई) के बीच एक फर्क महत्वपूर्ण है, तो यह करने के लिए अच्छा अभ्यास है setAttributeNS का उपयोग करें जो केवल नामस्थान जागरूक डीओएम कार्यान्वयन में विशेषताओं को सेट करने की गारंटीकृत इंटरऑपरेबल तरीका है।

+0

केली, setAttributeNS (शून्य, ...) बनाम setAttribute() का प्रभाव क्या है? मुझे यकीन नहीं है कि यह डोम के साथ क्या करता है, धन्यवाद। – user246114

+1

से: http://xmlgraphics.apache.org/batik/faq.html, "हालांकि, यह जानना महत्वपूर्ण है कि कुछ कार्यान्वयन setAttribute (x, y) और setAttributeNS (null, x, y) के बीच एक अंतर बनाते हैं, तो setAttributeNS का उपयोग करना अच्छा अभ्यास है जो एक नामस्थान जागरूक डीओएम कार्यान्वयन में विशेषताओं को सेट करने का एकमात्र गारंटीकृत इंटरऑपरेबल तरीका है। " –

+0

ठीक है धन्यवाद, मैं इसके साथ जाऊंगा। – user246114

0

उघ यह वेबकिट में एक बग जैसा दिखता है। एनीमेशन शुरू करने के लिए आपको node.beginElement() को कॉल करना होगा, लेकिन वेबकिट में यह काम नहीं करता है, बग ट्रैकर में दिखाई देता है।

विस्फोट।

+1

कृपया, क्या आपके पास वेबकिट बग ट्रैकर में सटीक बग का लिंक है? यह मुझे बहुत मदद करेगा। धन्यवाद। – tillda

+0

@tillda शायद यह मदद करेगा http://stackoverflow.com/questions/8520493/svg-elements-will-not-animate-when-added- गतिशील रूप से – Green

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