我可以设置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
命令我们;)

08-25 15:17
查看更多