SVG animateTransform不能像css3转换一样工作 [英] SVG animateTransform not working same as css3 transform

问题描述

SVG animateTransform与css3转换不同。

  svg.truck {overflow：visible;}。{transform-origin：50％50％;动画：烟1.5s无限放宽;} @ keyframes smoke {from {transform：translate（0，5px）scale（1,1）;}到{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一样设置transform-origin的能力。因此，尺度变换会影响位置和大小。

最简单的解决方案是将圆放置在原点，并用父组元素重新定位。 p>

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

  svg.truck {overflow：visible;}。smoke {transform-origin：50％50％;动画：烟1.5s无限放宽;} @ keyframes smoke {from {transform：translate（0，5px）scale（1,1）;}到{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 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>

解决方案

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>

这篇关于SVG animateTransform不能像css3转换一样工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！