Question

我正在尝试在svg内部和组内部开发带有“text”标签的文本动画使用“animate”标签当试图用简单的网页构建时，它工作正常但是当我在一个Timer中使用带有Javascript的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);

有人可以告诉我为什么动画没有发生？或者它可能无法与javascript计时器同步？

Answer 1

这可以使用Firefox正确动画。如果您使用的是基于Webkit的浏览器，那么您似乎有this issue

svg中的文本不会使用<animate> </animate>显示动画

1 个答案: