Gdzie jest moja <circle>?

Question

Szukam utworzyć prostą animację pulsującą na svg elementu circle. Używam animacji transform: scale(..,..), ale z jakiegoś powodu przesuwa ona cały okrąg w obrębie swojego kontenera, a nie tylko skaluje sam element.

Oto animacja:

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

A oto przykład (w tym samym animacji stosowanej do div która produkuje pożądanego rezultatu):

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

Wszelkie pomysły na stworzenie ten efekt? Koło może być umieszczone w dowolnym miejscu w obrębie svg i musi zachować tę pozycję.

Answer 1

Należy zmienić wartość transform-origin property.

W tym przypadku, należy użyć wartości 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%; 
} 

Domyślnie wartość jest 0 0 na svg elementów. Numer referencyjny:

CSS Transforms Module - 8 The transform-origin Property

Wartość domyślna dla elementów SVG bez związanego polu układu CSS jest 0 0.

Answer 2

Trzeba dodać właściwe przekształcić pochodzenia do kręgu:

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

przekształcić w HTML-pochodzenie ma wartość domyślną 50% 50%; ale nie w SVG.