SVG animateTransform ne fonctionne pas comme la transformation css3

Question

SVG animateTransform ne fonctionne pas comme la transformation 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

Le problème est que les animations SVG n'ont pas la possibilité de définir transformer origine comme vous pouvez avec CSS. Ainsi, la transformation d'échelle affecte la position ainsi que la taille.

La solution la plus simple est de mettre le cercle à l'origine et de le repositionner avec l'élément de groupe parent.

De même, pour faire correspondre le CSS, vous devez changer l'ordre de vos éléments <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>