svg의 텍스트는 애니메이션을 표시하지 않습니다. <animate>

"text"태그가 포함 된 텍스트를 svg 내부 및 그룹 내부에 작성하려고합니다. "애니메이션"태그를 사용하는 애니메이션 빌드 할 때 간단한 웹 페이지와 함께, 그것은 확실히 근무하지만svg의 텍스트는 애니메이션을 표시하지 않습니다. <animate>

(아무 애니메이션) 나는 애니메이션이 바로 표시되지 않습니다 타이머 내부의 자바 스크립트와 HTML DOM과 SVG를 적용하지만, SVG 텍스트가 제대로 표시 할 때 애니메이션 :

var Animate; 
    Animate = document.createElementNS("http://www.w3.org/2000/svg", "animate"); 
    Animate.setAttribute("attributeName", "x"); 
    Animate.setAttribute("from", 500); 
    Animate.setAttribute("to", 35); 
    Animate.setAttribute("dur","1s"); 
    Animate.setAttribute("fill", "freeze"); 

    var SVG=document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
    SVG.style.zIndex = 1; 
    SVG.style.position = "absolute"; 

    var Group = document.createElementNS("http://www.w3.org/2000/svg", "g"); 
    Group.setAttribute("id","Effect1"); 

    var Component=document.createElementNS("http://www.w3.org/2000/svg", "text"); 
    Component.setAttribute("fill", "rgb(30,100,245)"); 
    Component.setAttribute("font-family", "Arial"); 
    Component.setAttribute("font-size", 20); 
    Component.setAttribute("style", "dominant-baseline:hanging"); 


    var txt = document.createTextNode("Complete Trial"); 
    Component.appendChild(txt); 

    Component.appendChild(Animate); 
    Group.appendChild(Component); 

    SVG.appendChild(Graph); 
    document.body.appendChild(SVG);

누군가 왜 애니메이션이 발생하지 않았는지 말할 수 있습니까? 아니면 그냥 자바 스크립트 타이머와 동기화 할 수 없습니까?

출처

2012-09-27 Eldon Lesley

Firefox에서 올바르게 움직입니다. Webkit 기반 브라우저를 사용하는 경우, 사용자가 가지고있는 것처럼 보입니다 this issue

출처

2012-09-27 09:10:51

예, 분명히 문제가 저와 일치하고 Chrome을 사용하고 있으며 적어도 Chrome에서 해결할 수 있습니다. 애니메이션을 Chrome에서 작동하도록 만드는 솔루션 ?? –

옵션은 다음과 같을 수 있습니다 : 버그를 수정하기위한 패치를 작성하십시오 :-), DOM을 사용하여 요소를 생성하거나 버그가없는 브라우저를 사용하지 마십시오. –

svg의 텍스트는 애니메이션을 표시하지 않습니다. <animate>

답변

관련 문제