SVG - 从中心重复缩放路径（脉动）

Question

我有一张SVG图形，其中心点坐标为(100, 100)。

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

一个路径（如圆）应该将其包围并跳动 - 我的意思是，它应该从0缩放到一个值，集中在点（100,100）。 在执行此操作时，脉冲还应从不透明度=0开始，到不透明度=0.5，然后回到不透明度=0。 （我不想使用<canvas>代替路径。）

---

整个过程看起来像这样：

<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>

---

我的要求并没有得到满足，脉冲从中间开始，但向右下方移动，同时放大。有人知道正确的操作方法吗？谢谢。 （我查了几篇其他帖子，但没有帮助到我）

- Dunkelbunt27

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 -->

"

示例小提琴

"

- Sirko

Answer 2

尝试在Adobe Illustrator中创建一个以x="10"，y="15"为中心，宽度和高度均为10的图形并保存。然后你会在文本编辑器中看到以下内容：

    <rect x="5" y="10" width="10" height="10" fill="black">

将图形中心的坐标从x="10"、y="15"设置为x=0，y=0（在Adobe Illustrator的变换窗口中），并保存。接下来你会在文本编辑器中看到：

    <rect x="-5" y="-5" width="10" height="10" fill="black">

创建一个 defs 块并使用它。添加缩放效果（现在是从中心开始）

<defs>
    <rect id="any_figure" x="-5" y="-4.5" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="10" height="10">
        <!--it animates scale up and scale down onclick -->
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.05" repeatCount="1" begin="mousedown+0.2s" dur="0.2s" fill="freeze"></animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.05" to="1" repeatCount="1" begin="mouseup+0.4s" dur="0.2s" fill="freeze"></animateTransform>
    </rect>
</defs>
<use xlink:href="#any_figure"  transform="translate(10,15)"/>

- Artem.Borysov