SVG - scale path from center repetitively (pulsati

Question

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

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

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)

Answer 1

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.

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

Example Fiddle

Answer 2

Try to create figure in Adobe Illustrator with center in x="10", y="15", width,height=10 and save. You'll see next in text editor :

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

Set coordinates of figure center from x="10", y="15" to x=0, y=0 (transformation window in Adobe Illustrator) and save. You'll see next in text editor :

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

Make for it defs block and use it. Add scale effect(now it from center)

<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)"/>