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

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 属性从一个节点复制到另一个节点。

除非指定 dur 属性，否则不会获得插值

如果动画没有"dur"属性，则简单持续时间是无限期的。请注意，如果简单持续时间是无限期的，则插值将不起作用（尽管这可能仍然对"set"元素有用）。除了本规范中明确提及的任何特定于 SVG 的规则外，此属性的规范性定义是 SMIL 动画规范。特别是，请参阅 SMIL 动画："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>