SVG animateTransform not working same as css3 transform

问题

SVG animateTransform not working same as the css3 transform.

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>

回答1:

The problem is that SVG animations don't have the ability to set transform-origin like you can with CSS. So the scale transform is affecting the position as well as the size.

The simplest solution is put the circle at the origin and resposition it with the parent group element.

Also, to match the CSS, you need to switch the order of your <animateTransform> elements.

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>

来源：https://stackoverflow.com/questions/34298861/svg-animatetransform-not-working-same-as-css3-transform

标签

css

css3

svg

transform

animatetransform