SVG-重复从中心缩放的路径(脉动) [英] SVG - scale path from center repetitively (pulsating)

问题描述

我有一个svg图形，其中心点位于(100，100).

I have an svg graphic with a central point at (100, 100).

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

路径(如圆形)应环绕并脉动-我的意思是，路径应从0缩放为值，集中 >在该点上(100,100). 在执行此操作时，脉冲还应从不透明度= 0开始，到不透明度= 0.5，然后再回到不透明度= 0. (我不想用它代替路径.)

A path (like a circle) should surround it and pulsate - I mean, it should scale itself from 0 to a value, centralized on the point (100,100). While doing this the pulse should also start with opacity=0, to opacity=0.5 and back to opacity=0. (I don't want to use instead of path.)

整个过程看起来像这样:

The whole thing looks like this:

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

---

它无法按我的意愿工作，脉冲从中间开始，但向下移动到右侧，同时按比例放大. 有人知道该怎么做吗? 提前致谢. (我查看了其他几篇文章，但对我没有帮助)

---

It does not work as I want, the pulse starts from the middle but moves down to the right, while scaling up. Does anybody know how to do it right? Thanks in advance. (I looked up several other posts, but it did not help me)

推荐答案

scale()变换(就像其他所有方法一样)基本上只是将所有坐标值与相应的缩放因子相乘.因此，如果您的对象不在原点(0,0)的中心，则它似乎会偏离中心.

The scale() transformation (as all others do similarly) basically just multiplies all coordinate values with the respective scaling factor. As a result, if your object is not centered at the origin (0,0), it seems to move away from the center.

所以简单的解决方案是，使对象的中心位于原点，然后应用变换并将其移动到想要的任何位置.

So the easy solution is, to have your object with its center at the origin, apply the transformation and the move it to wherever you want to have it.

为了懒惰，我只是使用transform="translate(-100 -100)"移动了path元素.修改坐标本身也可以达到相同的效果.

For the sake of laziness I just moved your path element using a transform="translate(-100 -100)". The same effect could be achieved by modifying the coordinates themselves.

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

小提琴示例

这篇关于SVG-重复从中心缩放的路径(脉动)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！