SVG stroke animation is as simple as that

Before WE start, let’s see what it looks like

SVG stroke property stroke

The stroke attribute is used in SVG for strokes of shapes (line, Polyline, Rect, Circle, Ellipse, polygon), paths, and text (text, textPath, tSPAN).

Common attributes of Stroke

It’s a stroke of color.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
    <path stroke="red" d="M0 20 l200 0" />
    <path stroke="green" d="M0 40 l200 0" />
    <path stroke="blue" d="M0 60 l200 0" />
  </g>
</svg>
Copy the code

Stroke-width: width.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g stroke="black">
    <path stroke-width="2" d="M0 20 l200 0" />
    <path stroke-width="6" d="M0 40 l200 0" />
    <path stroke-width="12" d="M0 60 l200 0" />
  </g>
</svg>
Copy the code

Stroke-linecap: Line end style. The value can be “butt”, “round”, or “square”. The default value is “butt”.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M10 20 l210 0" />
    <path stroke-linecap="round" d="M10 40 l210 0" />
    <path stroke-linecap="square" d="M10 60 l210 0" />
  </g>
</svg>
Copy the code

Stoke-opacity: opacity

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g stroke="black" stroke-width="6">
    <path stroke-opacity="0.2" d="M10 20 l210 0" />
    <path stroke-opacity="0.6" d="M10 40 l210 0" />
    <path stroke-opacity="1" d="M10 60 l210 0" />
  </g>
</svg>
Copy the code

Stroke-linejoin: Corner style. The value can be arcs, bevel, miter, or round. The default value is miter.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300"
   viewBox="0 0 400 300">
  <g>
    <polyline stroke-linejoin="miter"
              points="20,100 60,30 100,100"
              stroke="black" stroke-width="30"
              fill="none" />

    <polyline stroke-linejoin="round"
              points="20180, 60110, 100180"
              stroke="black" stroke-width="30"
              fill="none" />

    <polyline stroke-linejoin="bevel"
              points="20260, 60190, 100260"
              stroke="black" stroke-width="30"
              fill="none" />

  </g>
</svg>
Copy the code

Stroke-dasharray: Defines dashed line styles. The value is a sequence separated by commas or Spaces. The first value in the sequence represents the dash size and the second value represents the space between the two dash values. For example, stroke-Dasharray :10, 2 indicates the dash size 10, dash gap 2. If the supplied sequence is an odd number, it is repeated once to form an even number. For example, stroke-dasharray:10 is equivalent to stroke-dasharray:10, 10 or stroke-dasharray:10, 2, 5 is equivalent to stroke-dasharray:10, 2, 5, 2, 5.
```
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g stroke="black" stroke-width="6">
    <path stroke-dasharray="5, 5" d="M10 20 l210 0" />
    <path stroke-dasharray="10," d="M10 40 l210 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M10 60 l210 0" />
  </g>
</svg>
Copy the code
```
Singsong: That is to say, the stroke-Dasharray value sequence is divided into two values as a unit. The first value in each unit represents the dash size and the second value represents the space between the two dash values. demo
Stroke-miterlimit: Limits the miter when stroke-linejoin: miter.

Singsong: The priority of the style attribute is style > CSS > attribute.

How do I make stroke work

stroke-dashoffset

This property is used to specify the offset at the beginning of stroke-dasharray. This article focuses on objects, and understanding how this property works will give you a good grasp of SVG stroke animation. Stroke-dashoffset can be greater than or less than 0. Demonstration examples.

Value greater than 0
The value is less than 0. Equivalent offset = s – | – offset | % s. Offset indicates the positive value and S indicates the sum of dasharray (for example, dasharray: ‘100 50’, s: 150).

The animation principles

The offset at the beginning of stroke-Dasharray is controlled by controlling stroke-dashoffset over time to reach the animation effect. Demonstration examples.

Singsong: Stroke-dasharray is usually set to the total path length. If the total length is S, stroke-dasharray: s or stroke-dasharray: s s. Then change the stroke-dashoffset value from S to 0 to achieve a stroke animation from scratch.

Animation implementation:demo

css

.path {
  stroke-dasharray: 523.1047973632812;
  stroke-dashoffset: 0;
  animation: dash 2s linear 3s alternate infinite;
}
@keyframes dash {
    from {
        stroke-dashoffset: 523.1047973632812;
    }
    to {
        stroke-dashoffset: 0; }}Copy the code

Js. You need to useSVGGeometryElement.getTotalLength()Method to get the total length of the path. In SVG 1.1,getTotalLength()It only exists in SVGPathElement, and the base graph does not. However, in SVG 2.0, base graphics also inherit this approach.How to detect the SVG version can be found here.

Moved pathLength attribute and getTotalLength() and getPointAtLength() methods from SVGPathElement to SVGGeometryElement. ————[SVG 2 support in Mozilla

] (developer.mozilla.org/en-US/docs/…).

const path = document.querySelector('.path');
// Get the total length
const totalLength = path.getTotalLength();
/ / set the stroke - dasharray
path.style.strokeDasharray = totalLength;
/ / set the stroke - dashoffset
path.style.strokeDashoffset = totalLength;

let currentFrame = 0;
let totalFrames = 160;
const draw = function() {
    let progress = currentFrame / totalFrames;
    if (progress > 1) {
        window.cancelAnimationFrame(handle);
    } else {
        currentFrame++;
        / / update the stroke - dashoffset
        path.style.strokeDashoffset = totalLength * (1 - progress);
        handle = window.requestAnimationFrame(draw); }}; draw();Copy the code

In actual combat

Use the Stroke animation for preloaded animation presentation

Demo
Practical instance

tool

Vectr: SVG online author-Demo
INKSCAPE: SVG authouring tool
SVGOMG: SVG compression tool

Related to the library

vivus
Lazy Line Painter
Walkway – Demo

Refer to the article

How SVG Line Animation Works