Where's my <circle> going?

Question

I'm looking to create a simple pulsing animation on a circle svg element. I'm using a transform: scale(..,..) animation but for some reason it's moving the entire circle within its container rather than simply scaling 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's an example (including the same animation applied to a div which produces the desired result):

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

Any ideas on how to create this effect? The circle may be positioned anywhere within the svg and it needs to maintain this position.

Answer 1

You need to change the transform-origin property value.

In this case, you would use the value 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 is 0 0 on svg elements. Reference:

CSS Transforms Module - 8 The transform-origin Property

The default value for SVG elements without associated CSS layout box is 0 0.

Answer 2

You need to add proper transform-origin to your circle:

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

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