SVG比例变换具有运动

Question

有谁可以告诉我为什么这个SVG有动画动画？只有比例应该动画。

http://codepen.io/anon/pen/HbLkm/

Answer 1

它们相对于原点0,0进行缩放。

您可以覆盖将圆圈移动到原点0,0，然后使用封闭的g对象将它们移回原来的位置：

<g transform="translate(391.1,22.9)">
    <circle class="pulse2" ... cx="0" cy="0" r="9"/> 
</g>
<g transform="translate(457.6,22.9)">
    <circle class="pulse2" ... cx="0" cy="0" r="9"/>
</g>

请参阅：Updated CodePen 1

另一种方法是在CSS中使用transform-origin: center：

.pulse2 {
  transform-origin: center;
  -webkit-transform-origin: center;
}

请参阅：Updated CodePen 2