Pulse Effect does not work correctly when it has 2 elements

Question

Pulse Effect does not work correctly when it has 2 elements

Navigation

#1 by (1 votes)

1

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

Running: link

The problem is that pulse works correctly on the first <circle> but on the second, instead of working properly, it plays the pulse down every time it clicks. I do not understand why.

html html5 css css3 svg

asked by anonymous 20.02.2017 / 20:56

1 answer

How to return the sequence of the week in the reported period? Find app by play store search

score 1 · Accepted Answer

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

The simplest solution is to reposition the coordinate origin for each transformation in the center of the corresponding circle. This can be done by setting transform-origin: 50% 50%; to .pulse and deleting 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 exchange matrix(a,0,0,a,0,0) with scale(a) which is equivalent and makes your code more readable:

-webkit-transform: scale(4);

JSFiddle