Getting Started Tutorial on Animating SVG Path Strokes Using CSS3

Without relying on JavaScript, pure CSS is used to implement svg stroke drawing animation effect and effect demonstration animation.

Basics:

There is a relatively important attribute branch stroke in SVG, which is called "stroke" in Chinese software. The stroke-related properties include the following:

1. stroke indicates the stroke color. The name that represents the color is not stroke-color, but simply stroke. Its value is officially called "paint", and the optional value types include none , currentColor , and <color> .

none
<color>
currentColor

2. stroke-width indicates the thickness of the stroke.

3. stroke-linecap indicates the expression of stroke endpoints. Available values ​​are: butt , round , square , inherit . The diagram is as follows:

4. stroke-linejoin indicates the expression of stroke corners. Possible values: miter , round , bevel , inherit . The diagram is as follows:

5. stroke-miterlimit indicates the expression of stroke intersection (acute angle), and the default size is 4. It means something like the angle loss of the bevel to bevel. The larger the value, the smaller the loss.

6. stroke-dasharray indicates dashed stroke. The optional values ​​are: none , <dasharray> , inherit

none
<dasharray>
inherit

7. stroke-dashoffset indicates the starting offset of the dashed line. The optional values ​​are: <percentage> , <length> , inherit . Respectively represent: percentage value, length value, and inheritance.

8. stroke-opacity indicates the stroke transparency, the default is 1.

The animation effects related to this tutorial are stroke-dasharray and stroke-dashoffset .

stroke-dasharray and stroke-dashoffset

For the sake of convenience and to reduce interference, let's take a straight line and fry a chestnut, as follows:

Click the slider below (or enter a value) to experience:

stroke-dasharray:

stroke-dashoffset:

The HTML code is:

<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
 <g>
  <line fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="0" y1="90" x2="400" y2="90"/>
 </g>
</svg>

When moving the slider (or typing in the text box), the stroke-dasharray and stroke-dashoffset values ​​of the <line> node element are set through the setAttribute method to achieve the above effect.

A special case

Let's think about this now. What would happen if stroke-dasharray and stroke-dashoffset values ​​were both very large and exceeded the total length of the stroked path?

To explain it in Chinese, a sausage is 12 cm long, and dotted lines should be drawn on it with an interval of 15 cm. If there is no dashoffset , the front 15 cm of the sausage will be covered by chili sauce! It's actually only 12 centimeters, so what we see is the entire ham sausage covered in chili sauce.

Now, dashoffset is also 15 cm, which means the dotted line will be offset 15 cm backwards. As a result, the chili sauce will be spread outside the ham, which means there will be no chili sauce on the ham. If we use the straight line SVG above, the straight line will become invisible.

If we gradually reduce the dashoffset value, we will find that the chili sauce on the ham appears little by little, as if the chili sauce is smeared on the root of the ham.

Slide both sliders to the right, and then slowly slide the slider to the left (please use a browser that supports type=range). You will see a straight line slowly appearing. This is the principle of SVG path animation.

CSS3 animation support

The power of inline SVG lies in the fact that it is also an HTML element that can be controlled by CSS attributes, handling traditional height and width positioning, borders and background colors, etc. Some special attributes of SVG itself can also be supported by CSS, even in CSS3 animation .

Therefore, the SVG stroke animation effect we discussed above can be easily implemented using CSS3 animation without any JavaScript, which is how the demo page was implemented at the beginning.

The CSS code is as follows:

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

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

1000 doesn't have any special meaning, it's just big enough to make sure it's larger than the length of each path. You can also use 1500, the difference is that the stroke speed will be a little faster.

Friends who are familiar with the CSS3 animation property should be able to see the meaning of the above code at a glance. In the 5-second animation, the stroke-dashoffset goes from 1000 to 0. The stroke animation is formed.

The above CSS code is almost universal.

No matter how complex your SVG path is, you can animate its stroke. According to my own tests, there is no animation effect under IE10+. It is not because CSS does not support SVG's stroke-related attributes, but because animation does not support animation of stroke-related attributes.

What are the uses of the above effects? I have thought of the following scenarios: showing some key points step by step during a demonstration; or hover stroke effects on pictures; or arrow guidance effects on website tip items, etc., all of which are very useful.

Length of the path

If you want to know the path, or the exact length of a line. You may need to use JavaScript, similar to the following code:

var path = document.querySelector('path');
var length = path.getTotalLength();

References

Polygon feature design: SVG animations for fun and profit

Animating Vectors with SVG

How SVG Line Animation Works

Animated line drawing in SVG

W3 – Stroke Properties

Tutorial transferred from:

https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%e5%8a%a8%e7%94%bb-%e8%b7%af%e5%be%84/

Summarize

The above is an introductory tutorial on how to use CSS3 to achieve SVG path stroke animation effects. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!