私の<circle>はどこに行きますか？

Question

私は、circle svg要素で簡単なパルスアニメーションを作成したいと考えています。私はtransform: scale(..,..)アニメーションを使用していますが、何らかの理由で単純に要素自体を拡大するのではなく、コンテナ内の円全体を動かしています。ここで

はアニメーションです：

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

そして、ここで（望ましい結果を生成divに適用されたものと同じアニメーションを含む）の例です：

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

作成する方法上の任意のアイデアこの効果は？円はsvgのどこにでも配置でき、この位置を維持する必要があります。

Answer 1

transform-origin propertyの値を変更する必要があります。この場合

、あなたが値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%; 
} 

を、値がsvg要素に0 0です。参考：

CSS Transforms Module - 8 The transform-origin Property

関連するCSSレイアウトボックスなしのSVG要素のデフォルト値は0 0です。あなたは適切な変換-起源を自分のサークルに追加する必要が

Answer 2

：

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

変換-起源をHTMLには、SVGのデフォルト値50% 50%;ではなく、を持っています。