एसवीजी गतिशील रूप से जोड़ा तत्वों

Question

this कोड के आधार पर के साथ चेतन, मैं एक गतिशील रूप से निर्मित एसवीजी तत्व चेतन करने के लिए कोशिश कर रहा हूँ:

var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg'); 
var circle = document.createElementNS('http://www.w3.org/2000/svg','circle'); 
circle.setAttribute("cx", "10"); 
circle.setAttribute("cy", "10"); 
circle.setAttribute("r", "10"); 
circle.setAttribute("fill", "blue"); 
var ani = document.createElementNS("http://www.w3.org/2000/svg","animateTransform"); 
ani.setAttribute("attributeName", "transform"); 
ani.setAttribute("attributeType", "xml"); 
ani.setAttribute("type", "translate"); 
ani.setAttribute("from", "10"); 
ani.setAttribute("to", "100"); 
ani.setAttribute("begin", "0s"); 
ani.setAttribute("dur", "2s"); 
ani.setAttribute("fill", "freeze"); 
circle.appendChild(ani); 
svgnode.appendChild(circle); 
document.getElementById('mydiv').appendChild(svgnode); 

एसवीजी ठीक दिखाई देता है, लेकिन एनीमेशन काम नहीं करता। यदि मैं सादे HTML/SVG में समकक्ष कोड लिखता हूं तो यह काम करता है। मैं क्रोम का उपयोग कर रहा हूँ।

Answer 1

क्रोम पर गतिशील रूप से जोड़े जाने पर यह काम नहीं करेगा (एफएफ के साथ काम करेगा)।

http://jsfiddle.net/tap0ri/SF5nE/2/

यह है क्रोम बग प्रतीत हो रहा है देखते हैं।

Answer 2

निश्चित रूप से [अभी भी] क्रोम के साथ एक बग। रनिंग क्रोम 19.0.1084.52

इस कोड काम करता है: http://jsfiddle.net/t3d28/

इस कोड को अभी भी काम नहीं करता: http://jsfiddle.net/tap0ri/SF5nE/2/

Answer 3

करता है के साथ viewBox = "0 0 0 0" दोनों नाविकों पर नहीं काम करता है।

वर्क्स यहाँ:

<div id="mydiv"> 
    <svg id="svgNode" version="1.1" width="100%" height="100%" viewBox="0 0 100% 100%" preserveAspectRatio="xMidYMid meet" id="ext-element-180"></svg> 
</div> 

देखें: https://jsfiddle.net/oOroBax/xkb89y4h/

Answer 4

मैं अभी भी है एक ही समस्या 5 साल के पहले :) (और svg-फ़िल्टर भी साथ)

मैं उपयोग पालन हैक:

1. मैं सभी सेट गुणों को सेट कर सकता हूं, उदाहरण के लिए ani.setAttr ibute ("विशेषता नाम", "रूपांतरित");

2. मैंने पढ़ा है और मेरी svg-रूट innerHTML सेट: $ svgRoot.html ($ svgRoot.html());

आशा है कि यह किसी को मदद मिलती है, या किसी ने मुझे एक बेहतर तरीका :)