Pulse effect does not work properly when it has 2 elements

Question

I have the following code:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     xml:space="preserve">
     <g>
     <circle class="pulse" fill="none" stroke="#FF0000" stroke-miterlimit="5" cx="40" cy="40" r="2" />
    <circle class="" fill="#FF9C00" cx="40" cy="40" r="2" />
    </g>

    <g>
     <circle class="pulse" fill="none" stroke="#FF0000" stroke-miterlimit="5" cx="65" cy="65" r="2" />
    <circle class="" fill="#FF9C00" cx="65" cy="65" r="2" />
    </g>
</svg>

And the effect:

@-webkit-keyframes svg_pulse {
     0% {
        -webkit-transform: matrix(1,0,0,1,0,0);
        stroke-width: 1;
        opacity: 1;
     }

     50% {
        opacity: 1;
     }
     100% {
        -webkit-transform: matrix(4,0,0,4,-120,-120);
        stroke-width: 0.25;
        opacity: 0;
     }
}

.pulse {
    -webkit-animation: svg_pulse 1s ease;
    -webkit-animation-iteration-count: infinite;
}

In operation: https://jsfiddle.net/4ej6msb9/1/

The problem is that the Pulse works properly in the first <circle> but in the second, instead of working properly, it throws the Pulse down every time it pulses. I don’t understand why that.

Answer 1

The transformation occurs, by default, in relation to the origin of SVG coordinates (SVG point 0.0 - top left corner). As the circle is not at the origin, you compensated by moving the origin during the transformation (through a Translate last two simple parameters of matrix()). The problem is that there are two circles and they are at different coordinates. To get the desired effect in this case, you would have to move the two origins and the values would be different.

The simplest solution is to reposition the coordinate source for each transformation at the center of the corresponding circle. This can be done by defining transform-origin: 50% 50%; for .pulse and eliminating the Translate:

@-webkit-keyframes svg_pulse {
     ...
     100% {
        -webkit-transform: matrix(4,0,0,4,0,0); /* remova o translate 120,120 */
        stroke-width: 0.25;
        opacity: 0;
     }
}

.pulse {
    -webkit-transform-origin: 50% 50%;  /* acrescente esta linha */
    -webkit-animation: svg_pulse 1s ease;
    -webkit-animation-iteration-count: infinite;
}

You can additionally change the matrix(a,0,0,a,0,0) for scale(a) which is equivalent and makes your code more readable:

-webkit-transform: scale(4);

Jsfiddle