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

来源：13-1 svg transform属性解析

页雨

2020-07-21

<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 特性如此

写回答

1回答

扬_灵

2020-07-21

同学你好，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>

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

扬_灵

页雨

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

2020-07-22

共2条回复

数据可视化入门到精通-打造前端差异化竞争力

同级别前端，掌握数据可视化薪资更高

1520 学习 · 1043 问题

查看课程

相似问题

请问老师关闭动画的逻辑