我可以设置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>
如何使上述代码正常工作?
最佳答案
示例代码(简单)与图像是美丽的:
<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>
示例(无图像)
https://codepen.io/danjiro/post/how-to-make-svg-loop-animation
辅导的:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
命令我们;)