我可以为SVG圈设置动画吗?
<svg>
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
fill="freeze"
repeatCount="indefinite" />
</svg>
同样,我正在尝试为图像设置动画:
<svg>
<image id="orange-circle" x="0" y="20" width="200" height="180" xlink:href="cat.png" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
fill="freeze"
repeatCount="indefinite" />
</svg>
如何使上述代码有效?
答案 0 :(得分:2)
带图像的示例代码(简单)很漂亮:
<svg>
<circle fill="blue" cx="150" cy="100" r="50"></circle>
<image xlink:href="http://i.imgur.com/ANS7Rkc.png" x="-50" y="72" width="100" height="50">
<animate attributeName="x" from="-50" to="300" dur="5s" repeatCount="indefinite"></animate>
</image>
</svg>
&#13;
示例(无图像) https://codepen.io/danjiro/post/how-to-make-svg-loop-animation
<强>教程:强> https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
禁止我们;)