关于 animateTransform 动画不同类型间只生效一个的问题

Question

<svg width="400" height="400" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="linear" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="blue" stop-opacity="0.2"></stop>
      <stop offset="0.5" stop-color="red"></stop>
      <stop offset="1" stop-color="#58bf78"></stop>
    </linearGradient>
  </defs>
  <polygon points="20 0 40 20 20 40 0 20" fill="url(#linear)">
    <animateTransform attributeName="transform" type="translate" values="20 20" begin="2s"></animateTransform>
    <animateTransform attributeName="transform" type="rotate" values="90 20 20" begin="4s" ></animateTransform>
  </polygon>
</svg>

代码如上所示，本来是想两个类型的 transform 进行叠加，而最终结果却是 rotate 生效了，translate 失效了，这个怎么解决还是说 animateTransform 特性如此

Answer 1

扬_灵 2020-07-21 17:51:01

同学你好，animateTransform 设置多个不同类型动画是可以实现的，你可以参考一下下面的案例，

<svg width="1400" height="400" viewBox="0 0 100 100">
<defs>
<linearGradient id="linear" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="blue" stop-opacity="0.2"></stop>
<stop offset="0.5" stop-color="red"></stop>
<stop offset="1" stop-color="#58bf78"></stop>
</linearGradient>
</defs>
<polygon points="20 0 40 20 20 40 0 20" fill="url(#linear)">
<animateTransform attributeName="transform" type="translate" values="0 0 ;20 20" begin="2s" dur="2s" />
<animateTransform attributeName="transform" type="rotate" values="90;20;20" dur="5s" begin="4s"/>
</polygon>
</svg>

如果不能解决你的问题，可以继续追问。

• 提问者 页雨 #1

  animateTransform 能实现不同类型动画的叠加吗？就像直接设置 transform 那样，不同类型动画是叠加在一起的

• 扬_灵 回复 提问者 页雨 #2

  同学你好，这样是可以的实现的。