मैं वेबसाइट में एनीमेशन के लिए एसवीजी पथ का उपयोग करके इसे (नीचे दी गई तस्वीर) हासिल करने की कोशिश कर रहा हूं। मैंने यह देखा https://css-tricks.com/svg-line-animation- काम करता है/ और इसे आजमाना चाहता था। लेकिन मुझे यकीन नहीं है कि मैं पथ और एनीमेशन कैसे बना सकता हूं। कृपया मेरी मदद करें! धन्यवाद

enter image description here

4
lel 14 पद 2017, 08:18

2 जवाब

सबसे बढ़िया उत्तर

आप एनिमेशन के लिए svg कोड का उपयोग कर सकते हैं। आप एसवीजी पथों पर सीएसएस एनीमेशन का उपयोग कर सकते हैं।

.st0{
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: draw1 4s linear forwards;
animation: draw1 4s linear forwards;
}
.st1{
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 200;
stroke-dashoffset: 200;
-webkit-animation: draw2 3s linear 2s forwards;
animation: draw2 3s linear 2s forwards;
}
  
@-webkit-keyframes draw1{
  to {stroke-dashoffset: 0;}
}
@keyframes draw1{
  to {stroke-dashoffset: 0;}
}
@-webkit-keyframes draw2{
  to {stroke-dashoffset: 0;}
}
@keyframes draw2{
  to {stroke-dashoffset: 0;}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 614 53" style="enable-background:new 0 0 614 53;" xml:space="preserve">
<polyline class="st0" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 "/>
<line class="st1" x1="307" y1="53" x2="307" y2="0"/>
</svg>
3
Ganesh Yadav 15 पद 2017, 19:03

एसवीजी समाधान

एनीमेशन विशेषता <stroke-dashoffset> का उपयोग करता है - लाइन की शुरुआत से इंडेंट। <stroke-dashoffset> के अधिकतम मान पर दृश्यमान रेखा शून्य होती है।
<stroke-dashoffset ="0"> के मान के साथ रेखा अधिकतम आकार प्राप्त कर लेती है।

एनीमेशन में अप्रत्याशित प्रभावों से बचने के लिए लाइन की लंबाई की सटीक गणना करना आवश्यक है।

इस उदाहरण में, <line> की लंबाई 53px है, <polyline> के लिए 680px है।

<style>
.st0{fill:none;stroke:#000000;stroke-miterlimit:10; stroke-dasharray: 680; stroke-dashoffset: 680;} 
.st1{fill:none;stroke:#000000;stroke-miterlimit:10; stroke-dasharray: 53; stroke-dashoffset: 53;}  
 </style>
<svg version="1.1"  viewBox="0 0 614 53" >
 <polyline class="st0" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 " >
  <animate
    attributeName="stroke-dashoffset"
    from="680"
    to="0"
    dur="2s"
    fill="freeze" />
 </polyline>
<line class="st1" x1="307" y1="53" x2="307" y2="0">
    <animate
      attributeName="stroke-dashoffset"
      from="53"
      to="0"
      dur="2s"
      fill="freeze" />
</line>
 
</svg>
1
Alexandr_TT 4 फरवरी 2019, 12:31