Introduction to SVG path tracing animation using CSS3

Time:2020-3-30

Do not rely on JavaScript, directly use pure CSS implementationsvgDraw the animation effect of the stroke, the effect shows the animation.

Basic knowledge:

There is an important attribute branch in SVGstroke, which is called “edge tracing” in Chinese software. The properties related to stroke are as follows:

1、 strokeIndicates the stroke color. The name of the color is not stroke color, but simply stroke. Its value is officially called “paint”, and the types of optional values includenonecurrentColor<color>


none
<color>
currentColor

2、 stroke-widthIndicates the thickness of the stroke.

3、 stroke-linecapRepresents the end representation of the stroke. Available values are:buttroundsquareinherit。 The figure is as follows:

4、 stroke-linejoinRepresents the representation of the stroke angle. Optional values:miterroundbevelinherit。 The figure is as follows:

5、 stroke-miterlimitRepresents the representation of stroke intersection (acute angle). The default size is 4. The greater the value, the smaller the loss.

6、 stroke-dasharrayIndicates dashed line tracing, optional values are:none<dasharray>inherit


none
<dasharray>
inherit

7、 stroke-dashoffsetIndicates the start offset of the dashed line. The optional values are:<percentage><length>inherit。 Respectively expressed as percentage value, length value and inheritance.

8、 stroke-opacityIndicates the stroke transparency. The default is 1.

The animation effect related to this tutorial isstroke-dasharrayandstroke-dashoffset

Stroke dasharray and stroke dashuffset

For the convenience of explanation and interference reduction, we stir fry a chestnut in a straight line as follows:

Click the slider (or enter value) below 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 entering the text box), set the stroke dasharray and stroke dashffset values of the < line > node elements through the setAttribute method to achieve the above effect.

A special case

Let’s all think about it now, ifstroke-dasharrayandstroke-dashoffsetIt’s worth a lot. What if it exceeds the total length of the tracing path?

In Chinese, a ham sausage is 12cm long, and a dotted line should be drawn on it. The spacing between the dotted lines is 15cm, if notdashoffset, the front 15 cm of the sausage will be covered with chili sauce! In fact, it’s only 12 cm, so what we see is that the whole sausage has chili sauce.

Now,dashoffsetIt’s also 15cm, that is to say, the dotted line needs to be shifted back 15cm. As a result, the chili sauce needs to be applied outside the sausage, that is, there is no chili sauce on the sausage. If I change it to the above line SVG, i.e. the line is invisible.

We putdashoffsetWhen the value gradually decreases, it will be found that the chili sauce on the sausage appears little by little, as if the chili sauce was applied from the root of the sausage.

The upper two sliders slide right to the end, and then the lower slider slowly slides left (please use a browser that supports type = range). You will see the line slowly come out, which is the principle of SVG path animation.

CSS3 animationSupport

The strength of inline SVG lies in that it is also an HTML element, which can be controlled by CSS attributes to deal with traditional height and width positioning, border background color, etc. some special attributes of SVG itself can also be supported by CSS, even in CSS3animationIn animation.

As a result, the SVG stroke animation we discussed above can easily use CSS3animationThis is the implementation of the demo page at the beginning.

Its 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 ensure that it’s bigger than the length of each path. You can also be 1500. The difference is that the stroke speed is faster.

The little partner of the property CSS3 animation should see the meaning of the above code at a glance. 5-second animation, stroke dasheffset from 1000 to 0. Stroke animation is formed.

The above CSS code is almost universal.

No matter how complex your SVG path is, it can be rendered in the form of stroke animation. According to my own test, ie10 + has no animation effect, not CSS does not support the stroke related attributes of SVG, but animation does not support the stroke related attributes of animation.

What’s the use of the above effects? I’d like to think of the following scenarios: step-by-step demonstration of some key points; or the hover edge tracing effect such as pictures; or the arrow guidance and prompt effect of tip items on the website, which are very useful.

Length of path

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


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

Reference articles

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 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/

summary

The above is the introduction of how to use CSS3 to achieve SVG path tracing animation. I hope it can help you. If you have any questions, please leave me a message, and I will reply you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!

Recommended Today

Configure Apache to support PHP in the Apache main configuration file httpd.conf Include custom profile in

In Apache’s main configuration file / conf/ http.conf Add at the bottom Include “D:workspace_phpapache-php.conf” The file path can be any In D: workspace_ Create under PHP file apache- php.conf file Its specific content is [html] view plain copy PHP-Module setup LoadFile “D:/xampp/php/php5ts.dll” LoadModule php5_module “D:/xampp/php/php5apache2_2.dll” <FilesMatch “.php$”> SetHandler application/x-httpd-php </FilesMatch> <FilesMatch “.phps$”> SetHandler application/x-httpd-php-source </FilesMatch> […]