SVG động với các yếu tố tự động thêm vào

Question

Dựa trên this mã, tôi đang cố gắng để animate một yếu tố SVG được tạo tự động:

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); 

các SVG hiện tốt, nhưng các hình ảnh động không hoạt động. Nếu tôi viết mã tương đương trong HTML/SVG đơn giản thì nó hoạt động. Tôi đang sử dụng Chrome.

Answer 1

Nó sẽ không hoạt động nếu được thêm động sau này trên chrome (sẽ hoạt động với FF).

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

điều này có vẻ là lỗi chrome.

Answer 2

Chắc chắn [vẫn] lỗi với Chrome. Chạy Chrome 19.0.1084.52

Mã này hoạt động: http://jsfiddle.net/t3d28/

Mã này vẫn không hoạt động: http://jsfiddle.net/tap0ri/SF5nE/2/

Answer 3

không hoạt động trên cả hai hàng hải với viewBox = "0 0 0 0".

trình ở đây:

<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> 

see: https://jsfiddle.net/oOroBax/xkb89y4h/

Answer 4

tôi vẫn có cùng một vấn đề 5 năm trước :) (và với svg-Filter quá)

tôi sử dụng sau hack:

1. Tôi đặt tất cả các thuộc tính có thể là wit setAtteribute, ví dụ ani.setAttr ibute ("attributeName", "transform");

2. Tôi đọc và thiết lập innerHTML svg-gốc của tôi: $ svgRoot.html ($ svgRoot.html());

Hy vọng nó sẽ giúp ai đó, hoặc ai đó có thể cho tôi biết một cách tốt hơn :)