Where is my <circle> going?

Question

I want to create a simple pulsed animation in a circle svg element. I use transform: scale(..,..) animation, but for some reason it moves the whole circle inside its container, and not just scales the element itself.

Here's the animation:

 animation: pulsate 2s infinite linear; @keyframes pulsate { 0% {transform: scale(0.1, 0.1); opacity: 0.0;} 50% {opacity: 1.0;} 100% {transform: scale(1.2, 1.2); opacity: 0.0;} } 

And here is an example (including the same animation applied to a div that gives the desired result):

http://codepen.io/anon/pen/jWqVyb

Any ideas on how to create this effect? A circle can be placed anywhere in svg , and it must maintain this position.

Answer 1

You need to change the value of transform-origin .

In this case, you should use a value of 50% 50% :

Updated example

 .beacon { height: 100px; width: 100px; border-radius: 50%; background: #fff; box-shadow: 0px 0px 2px 2px #fff; animation: pulsate 2s infinite linear; transform-origin: 50% 50%; } 

By default, the value 0 0 is in svg . Reference:

CSS Transforms Module - 8 transform-origin Property

The default value for SVG elements without the corresponding CSS layout field is 0 0 .

Answer 2

You need to add the correct conversion origin to your circle:

 circle { fill: #fff; transform-origin: 50px 50px; } 

transform-origin in HTML has a default value of 50% 50%; but not in SVG.