SVG图像动画化

Question

我可以将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>

我该如何使上面的代码运行起来？

- Mohammad Fareed

---

实际问题是什么？动画没有开始吗？它们到底有什么问题？周围的代码是否可能起到作用？ - dakab

看一个常见问题解答动画：https://css-tricks.com/transforms-on-svg-elements/ - KingRider

Answer 1

代码示例（简单）与图像一样美丽：

<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

加入我们；）

- KingRider