SVG animateTransform 与 css3 变换不同
SVG animateTransform not working same as css3 transform
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>
问题是 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>
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>
问题是 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>