0

これら 2 つの 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

このようなもの：

<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 に答える