0

我希望这两个 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"/>

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

4

2 回答 2

0

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

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

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

于 2013-09-08T18:08:15.897 回答
0

像这样的东西：

<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>
于 2013-09-09T19:29:54.733 回答