0

我正在尝试在 svg 内开发带有“text”标签的文本，并在尝试使用简单网页构建时使用“animate”标签在动画组内开发，它工作正常，但是当我将 SVG 与 HTML DOM 一起应用时Timer 中的 Javascript 动画不会显示，但 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);

谁能告诉我为什么动画没有出现？或者它只是无法与 javascript 计时器同步？

4

1 回答 1

1

这可以在 Firefox 中正确设置动画。如果您使用的是基于 Webkit 的浏览器，您似乎遇到了这个问题

于 2012-09-27T09:10:51.937 回答