Question

我想在这两个SVG动画上有相同的持续时间，但是end =“showLine.end”没有任何效果。

<animate id="showLine" attributeName="cx"  begin="0s"  dur="5s"/> 
<animateTransform attributeName="transform" type="translate" begin="showLine.begin+0s" end="showLine.end" fill="freeze" from="0,100" to="0,500"/>

请告诉我如何将一个动画的持续时间复制到另一个动画。谢谢。

Answer 1

您必须使用javascript将dur属性从一个节点复制到另一个节点。

You won't get interpolation unless you specify a dur attribute

如果动画没有'dur'属性，则简单持续时间是无限期的。请注意，如果简单持续时间不确定，则插值将不起作用（尽管这对于'set'元素仍然有用）。除了本规范中明确提到的任何特定于SVG的规则外，此属性的规范定义是SMIL动画规范。特别是，请参阅SMIL Animation：'dur'属性（[SMILANIM]，第3.2.1节）。 8

Answer 2

这样的事情：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <g>
    <rect id="r" width="100" height="100" x="40" y="20" fill="blue">
      <animate duration="aaa" attributeName="fill" begin="0s" dur="20s" fill="freeze" from="red" to="green"/> 
    </rect>
  </g>
  <script>
    var t = document.getElementsByTagName("*");
    for(var i = 0; i < t.length; ++i)
     {var T = t.item(i);
      if (T instanceof SVGAnimateElement)
       {T.setAttributeNS(null, "dur", "2s");
       }
     }     
  </script>
</svg>

复制持续时间从一个svg动画到另一个

2 个答案: