SVG animateTransform不工作于css3变换

Question

SVG animateTransform不像css3转换那样工作。

​

svg.truck {
  overflow: visible;
}
.smoke{
  transform-origin: 50% 50%;
  animation: smoke 1.5s infinite ease-out;
}
@keyframes smoke {
  from {transform: translate(0, 5px) scale(1, 1);}
  to { transform: translate(40px, 10px) scale(4, 4);}
}

<svg class='truck' height='53' viewBox='0 0 93 53' width='93' xmlns='http://www.w3.org/2000/svg'>
  <g>
    <circle cx='90' cy='35' fill='#000' r='2.5'>
      <animateTransform attributeName='transform' attributeType='XML' dur='1.5s' from='1' repeatCount='indefinite' to='4' type='scale'></animateTransform>
      <animateTransform additive='sum' attributeName='transform' attributeType='XML' dur='1.5s' from='0, 5' repeatCount='indefinite' to='40,10' type='translate'></animateTransform>
    </circle>
  </g>
</svg>
<hr>
<svg class='truck' height='53' viewBox='0 0 93 53' width='93' xmlns='http://www.w3.org/2000/svg'>
  <g class='smoke-group'>
    <circle class='smoke' cx='90' cy='35' fill='#000' r='2.5' />
  </g>
</svg>

​

Answer 1

问题是SVG动画无法像CSS那样设置转换原点。因此，尺度变换对位置和尺寸都有影响。

最简单的解决方案是将圆置于原点，并将其与父组元素重新定位。

此外，要匹配CSS，需要切换<animateTransform>元素的顺序。

​

svg.truck {
  overflow: visible;
}
.smoke{
  transform-origin: 50% 50%;
  animation: smoke 1.5s infinite ease-out;
}
@keyframes smoke {
  from {transform: translate(0, 5px) scale(1, 1);}
  to { transform: translate(40px, 10px) scale(4, 4);}
}

<svg class='truck' height='53' viewBox='0 0 93 53' width='93' xmlns='http://www.w3.org/2000/svg'>
  <g transform="translate(90,35)">
    <circle cx='0' cy='0' fill='#000' r='2.5'>
      <animateTransform attributeName='transform' attributeType='XML' dur='1.5s' from='0, 5' repeatCount='indefinite' to='40,10' type='translate'></animateTransform>
      <animateTransform additive='sum' attributeName='transform' attributeType='XML' dur='1.5s' from='1' repeatCount='indefinite' to='4' type='scale'></animateTransform>
    </circle>
  </g>
</svg>
<hr>
<svg class='truck' height='53' viewBox='0 0 93 53' width='93' xmlns='http://www.w3.org/2000/svg'>
  <g class='smoke-group'>
    <circle class='smoke' cx='90' cy='35' fill='#000' r='2.5' />
  </g>
</svg>

​