चेतन एसवीजी तत्व हर एक्स सेकंड

Question

परिचय

मैं दोनों Javascript और डोम <animate> तत्व का उपयोग SVG लिए कुछ बुनियादी एनीमेशन तकनीक पता है। इसलिए मैंने यह एसवीजी बनाया है, लेकिन मैं इसे समझ नहीं सकता कि एनीमेशन को हर एक्स सेकंड में बहुत अधिक कोड के बिना कैसे ट्रिगर करता है। मैंने begin="4s" की कोशिश की लेकिन यह केवल पहली बार प्रतीक्षा करें।

प्रश्न:

begin या dur की तरह एक डोम संपत्ति नहीं है, लेकिन सेकंड में एक अंतराल परिभाषित करने के लिए? इसे प्राप्त करने का बेहतर तरीका कौन सा है?

मैं क्या प्रयास किया है:

<animateTransform attributeName="transform" additive="sum" attributeType="XML" 
type="rotate" dur="1s" repeatCount="indefinite" from="0 54.2 43.3" 
to="360 54.2 43.3" begin="3s" fill="freeze"/> 

पूरा यहाँ उदाहरण: SVG Fiddle

नोट्स:

• मैं पहले से ही SVG Spec
• जाँच जोड़े कुछ जावास्क्रिप्ट कोड एक हैविकल्प
• CSS3 का उपयोग करते हुए एक विकल्प है भी

Answer 1

<g> 
    <rect x="0" y="0" width="30" height="20" fill="#f83"/>  
    <animateTransform id="id1" attributeName="transform" additive="sum" 
    type="scale" calcMode="linear" begin="4;id1.end+4" dur="2" keyTimes="0;1" 
    values="1 1;2 2" fill="freeze" /> 

</g> 

यहाँ

एनीमेशन, एनीमेशन अंत के सापेक्ष साथ निर्दिष्ट किया जाता है इस तरह से अपने एनीमेशन हमेशा अपने निर्धारित समय (यहाँ 4 सेकंड) के लिए प्रतीक्षा करें और चलना प्रारंभ हो जाएगा में शुरू फिर ...

इस कोशिश, सभी बेहतरीन

अद्यतन

अगर आप id.end + some_clock_value के बजाय id.end उपयोग करने में सक्षम तो keyTimes का उपयोग करें और विशेषता मान सही ढंग से, animateTransform निम्नलिखित के साथ अपने रोटेशन एनीमेशन की जगह है और यदि आप उत्पादन आप चाहते देखते हैं,

<animateTransform id="id1" attributeName="transform" additive="sum" 
    type="rotate" calcMode="linear" begin="0" dur="4" 
    repeatCount="indefinite" keyTimes="0;0.75;1" 
    values="0 54.2 43.3 ; 0 54.2 43.3 ; 360 54.2 43.3" fill="freeze" />