एसवीजी

Question

में एक तीर की ड्राइंग एनीमेशन मैं एसवीजी दुनिया में काफी नया हूं और जब मैं एक घुमावदार तीर "ड्रॉ" करना चाहता हूं तो मुझे कुछ मुद्दों का सामना करना पड़ रहा है।

असल में, मैं this article में समझाया गया एक एनीमेशन बनाना चाहता हूं, लेकिन तीर को प्रदर्शित करने के लिए पथ के अंत में एक आकार के साथ।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> 
<defs> 
    <marker 
    id="arrow" 
    orient="auto" 
    viewBox="0 0 10 10" 
    markerWidth="3" 
    markerHeight="4" 
    markerUnits="strokeWidth" 
    refX="1" refY="5"> 
    <polyline points="0,0 10,5 0,10 1,5" fill="black" /> 
    </marker> 
</defs> 

<path 
    id="line" 
    marker-end="url(#arrow)" 
    stroke-width="3" 
    fill="none" 
    stroke="black"> 

    <animate 
     dur="2s" 
     repeatCount="indefinite" 
     attributeName="d" 
     values="M10,10 L10,10; M10,10 L45,25;" /> 
</path> 

सीएसएस का एक सा है::

नीचे कोड मैं सीधे तीर के लिए उपयोग है

#line 
{ 
    stroke-dasharray: 5; 
    stroke-dashoffset: 10; 
    -webkit-animation: draw 1s linear infinite; 
} 

@-webkit-keyframes draw 
{ 
    to { stroke-dashoffset: 0;} 
} 

परिणाम नीचे है:

तो यह अच्छा है, लेकिन अब मुझे घुमावदार तीर चाहिए। इसलिए मैंने नीचे दिए गए एनिमेट टैग को अपडेट किया है:

<animate 
     dur="2s" 
     repeatCount="indefinite" 
     attributeName="d" 
     values="M7,121 C7,121 7,121 7,121; M7,121 C66,4 143,75 147,125" /> 

मैंने घुमावदार होने के लिए एनिमेट करने के लिए पथ को बदल दिया है।

मुझे लगता है कि यह काफी तार्किक है, लेकिन यह नहीं है मैं क्या पसंद करेंगे: लेकिन परिणाम के नीचे से एक है। मार्कर वर्तमान में एक सीधी रेखा पर चल रहा है; इसे ड्राइंग पथ का पालन करना चाहिए।

मैं पता नहीं ईमानदार होना करने के लिए ऐसा करने के लिए कैसे है, किसी भी सुझाव :)

आप a JSFiddle here पा सकते हैं बहुत अच्छा होगा।

जैसा कि आप देख सकते हैं, इन प्रयोगों में कोई जेएस का उपयोग नहीं किया जाता है, तो यह बहुत अच्छा होगा अगर हम इस भाषा से बच सकें और केवल एसवीजी + सीएसएस का उपयोग कर सकें।

अग्रिम धन्यवाद!

Answer 1

मुझे लगता है कि आप बहुत ही उपयोगी svg लाइन एनीमेशन पर इस लेख मिल सकती है: https://css-tricks.com/svg-line-animation-works/

सीएसएस: कार्रवाई में इसके बारे में

.path { 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    animation: dash 5s linear alternate infinite; 
} 

@keyframes dash { 
    from { 
    stroke-dashoffset: 1000; 
    } 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

डेमो: http://codepen.io/chriscoyier/pen/bGyoz

में के बारे में चेतावनी है जावास्क्रिप्ट और आकर्षित करने के लिए लाइन की लंबाई निर्धारित करना। यदि आप जेएस का उपयोग नहीं करना चाहते हैं, तो आप डैशर्रे और डैशऑफसेट मानों को अपडेट करके एनिमेट करने के लिए कितनी लंबाई एनिमेट कर सकते हैं।