javascript – Effect of growing polyline object curve?

Question:

Tell me, please, is it possible to achieve the effect, the so-called growing curve, implemented by changing the stroke-dashoffset with a polyline object.

I will give an example

.st1 {
  fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-miterlimit: 10;
}
<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
  <symbol id="myLine">

    <polyline points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" />
  </symbol>

  <use xlink:href="#myLine" class="st1" />
</svg>

Preferably with CSS

Answer:

For any object that has a stroke-dashoffset , you can get the effect of drawing lines. That is, for all svg shapes: line , circle , ellipse , polygon , polyline , path . It is only necessary to accurately calculate the length of this line. In your case the line length is 136px

Below is the utility code for exact calculation of <polyline> length
To calculate the length of another polyline , you need to copy the points values

  <input  type="button" value="Total"  onclick="TotalLength()"/>
 <div>  
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
     width="500" height="500" viewBox="0 0 500 500" > 
 
         <polyline id="check" fill= "none" stroke ="grey" stroke-width ="1" 
         
		 points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" />
</svg>
</div> 
   <script>
         function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Длина пути - " + len);
        };
  </script>
#myLine{
fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-miterlimit: 10;
stroke-dasharray:136;
  stroke-dashoffset:136;
  animation:dash 5s ease-in forwards;
}
@keyframes dash {
  0% { 
   stroke-dashoffset:136;
  }
  100% {
    stroke-dashoffset:0;
  }
 } 
<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 60 200 200">
  <symbol id="myLine">

    <polyline  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" />
  </symbol>

  <use xlink:href="#myLine" class="st1" />
</svg>

I'll add two more options:

#one. Path preparation option

This is the gray path that the line drawing animation will take.
The same line is used as in the first example, but it is fixed. ( id="shadow" )
Its duplicate is animated – id="#myLine" .

#myLine{
fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-miterlimit: 10;
stroke-dasharray:136;
  stroke-dashoffset:136;
  animation:dash 4s ease-in 1s forwards;
}
#shadow{
   fill: none;
  stroke: #EAEAEA;
  stroke-width: 4;
  stroke-miterlimit: 10;
   
}
@keyframes dash {
  0% { 
   stroke-dashoffset:136;
  }
  100% {
    stroke-dashoffset:0;
  }
 } 
<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 65 200 200">
  <symbol id="myLine">

    <polyline  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" />
  </symbol> 
   <symbol id="shadow">

    <polyline   points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5"  />
  </symbol>
  <use xlink:href="#shadow"  />
  <use xlink:href="#myLine"  />
  
</svg>

#2. Shadow animation option

To get the shadow, the first line is cloned and shifted to the right and down a few pixels.

 <symbol id="shadow">
    <polyline  transform="translate(1 0.5)" points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5"  />
  </symbol>

the animation of the lines is shared and implemented exactly as in the topmost, basic example for a single line:

#myLine{
fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-miterlimit: 10;
stroke-dasharray:136;
  stroke-dashoffset:136;
  animation:dash 5s ease-in forwards;
}
#shadow{
   fill: none;
  stroke: grey;
  stroke-width: 4;
  stroke-miterlimit: 10;
stroke-dasharray:136;
  stroke-dashoffset:136;
  animation:dash 5s ease-in forwards;
  opacity:0.5;
  
}
@keyframes dash {
  0% { 
   stroke-dashoffset:136;
  }
  100% {
    stroke-dashoffset:0;
  }
 } 
<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 65 200 200">

   <symbol id="shadow">
    <polyline  transform="translate(1 0.5)" points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5"  />
  </symbol>
  
  <symbol id="myLine">
    <polyline  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" />
  </symbol> 
  
  <use xlink:href="#shadow"  />
  <use xlink:href="#myLine"  />
  
</svg>
Post Views: 0
Scroll to Top