xml - SVG - 从中​​心重复缩放路径(脉动)

Question

我有一个中心点在 (100, 100) 的 svg 图形。

<g id="centre">
 <circle cx="100" cy="100" r="2"/>
</g>

一条路径(如圆圈)应该围绕它并脉动 - 我的意思是，它应该从 0 到一个值，集中> 在 (100,100) 点上。执行此操作时，脉冲也应从 opacity=0 开始，到 opacity=0.5 并返回到 opacity=0。(我不想使用而不是路径。)

---

整体看起来是这样的:

<g transform="translate(100,100)">
    <g id="pulse" >
        <radialGradient id="SVGID_4_" cx="100" cy="100" r="21.2498" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
            <stop  offset="1" style="stop-color:#006837" />
        </radialGradient>
        <path opacity="0.5" fill="url(#SVGID_4_)" stroke="url(#SVGID_4_)" stroke-width="0.5" stroke-miterlimit="10" d="M120.864,99.676
            c0,11.599-9.401,21-21,21c-11.598,0-21-9.401-21-21c0-11.598,9.402-21,21-21c6.705,0,12.679,3.144,16.523,8.037
            C119.193,90.281,120.864,94.783,120.864,99.676z" />
        <animateTransform 
            attributeType="xml"
            attributeName="transform"
            type="scale"
            from="0"
            by="3"
            dur="2s" 
            fill="freeze"           
            repeatCount="indefinite"
            />  
        <animate 
            attributeType="xml" 
            attributeName="fill-opacity" 
                from="0" 
                to="0" 
                values="0;0.5;0"
            dur="2s" 
            repeatCount="indefinite" 
            fill="freeze" />            
    </g>
</g>

<g id="centre">
    <circle cx="100" cy="100" r="2"/>
</g>
</svg>

---

它没有像我想要的那样工作，脉冲从中间开始但向下移动到右边，同时按比例放大。有人知道怎么做吗？提前致谢。(我查了其他几个帖子，但对我没有帮助)

Answer 1

scale() 转换(所有其他转换都类似)基本上只是将所有坐标值与相应的比例因子相乘。因此，如果您的对象不以原点 (0,0) 为中心，它似乎会远离中心。

因此，简单的解决方案是，让您的对象的中心位于原点，应用变换并将其移动到您想要的任何位置。

为了偷懒，我只是使用 transform="translate(-100 -100)" 移动了您的路径元素。可以通过修改坐标本身来实现相同的效果。

<!-- the other code -->
<path d="..." opacity="0.5" fill="url(#SVGID_4_)" 
      stroke="url(#SVGID_4_)" stroke-width="0.5" stroke-miterlimit="10" 
      transform="translate(-100 -100)"/>
<!-- more other code -->

Example Fiddle