मेरा <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 मान बदलने की जरूरत है।

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

डिफ़ॉल्ट रूप से, मूल्य 0 0svg तत्वों पर है:

इस मामले में, आप मूल्य 50% 50% का प्रयोग करेंगे। संदर्भ:

CSS Transforms Module - 8 The transform-origin Property

जुड़े सीएसएस लेआउट बॉक्स के बिना एसवीजी तत्वों के लिए डिफ़ॉल्ट मान 0 0 है।

Answer 2

आप उचित जोड़ने के लिए बदलने मूल के अपने सर्कल की जरूरत है:

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

बदलने मूल HTML में डिफ़ॉल्ट मान 50% 50%; है, लेकिन एसवीजी में नहीं।