SVG Path Stroke animation effect

first, the effect

In short, let SVG's strokes be like someone drawing the same animation effect.

basic knowledge that must be known

There is an important branch of property in SVG, stroke: "Stroke."

1,stroke Stroke Color

None No Color

<color> is our usual color value. RGBA, HSBA all support. Red,green, #000, #ccc等

The CurrentColor is slightly advanced and can be understood as: share the parent but not over the XML in the SVG element, the value in color (in style); The text that the path draws directly inherits the color color value of the parent tag.
2, the thickness of the stroke-width stroke. stroke-width:2px;
3, Stroke-linecap stroke endpoint representation, available values are: butt, round, square, inherit


4,stroke-linejoin the way the stroke rotation is performed. Available values are: miter, round, bevel, inherit


The expression of 5,stroke-miterlimit stroke intersection (acute angle). The default size is 4. What is the angle of the bevel to the loss of the meaning, the greater the value, the smaller the loss. What do you do, you can check other information.
6,stroke-dasharray virtual line drawing edge. Optional values are: none, <dasharray>, Inherit
None means not a dashed line;
<dasharray> is a comma-or space-delimited list of values. Represents the length of each dashed end. Can be a fixed length value, or it can be a percent value
Inherit table inheritance
7,stroke-dashoffset the starting offset of the dashed line. The optional values are: <percentage>, <length>, Inherit. Percent value, length value, inheritance
8,stroke-opacity represents stroke transparency. The default is 1.
The animation effects related to this article are related to Stroke-dasharray and Stroke-dashoffset.

iii. Stroke-dasharray and Stroke-dashoffset
The Stroke-dasharray dash setting can be either a value or an array, as shown in the following detail:

<svg>
    <g>
        <!--stroke-dasharray:20, from left to right, dotted length and spacing for 20-->
        <path d= "m10,20 l300,20" Style= "Stroke-dasharray:20;stroke:green;" ></path>
        <!--stroke-dasharray:20,10 from left to right, dotted length 20, spacing 10-->
        <path d= "m10,50 l300,50" style = "Stroke-dasharray:20,10;stroke:green;" ></path>
        <!--stroke-dasharray:20,5,5,10 from left to right first dotted line length 20, first spacing 5, second dashed length 5, second spacing 10-->
        < Path d= "m10,80 l300,80" style= "Stroke-dasharray:20,5,5,10;stroke:green;" ></path>
    </g>
</svg>

Stroke-dashoffset dashed left (when dotted values are smaller, constantly shifting with dotted lines displayed)

<svg>
    <g>
        <!--stroke-dashoffset:0-->
        <path d= "m10,20 l300,20" style= "Stroke: green;stroke-dasharray:40;stroke-dashoffset:0 "></path>
        <!--stroke-dashoffset:20 Dashed left 20, The first dashed line just shows half-->
        <path d= "m10,50 l300,50" style= "stroke:green;stroke-dasharray:40;stroke-dashoffset:20" ></path>
        <!--stroke-dashoffset:40  dashed left 40, the first dotted line is just all covered-->
        <path d= "m10,80 L300, "Style=" stroke:green;stroke-dasharray:40;stroke-dashoffset:40 "></path>

        <path d=" m10,110 L300, "Style=" stroke:green;stroke-dasharray:40;stroke-dashoffset:70 "></path>

    </g>
</" Svg>

a special case
Let's just think about what happens if the Stroke-dasharray and Stroke-dashoffset values are large, exceeding the total length of the stroke path.

In Chinese explanation is, a ham intestines 12 centimeters, want to draw a dash on the above, dotted line interval has 15 centimeters, if not dashoffset, then ham bowel front 15 centimeters will be covered with chili sauce. Actually only 12 centimeters, so what we see is that the whole ham sausage has chili sauce. Now, the Dashoffset is also 15 centimeters, that is, the dotted line will be offset by 15 centimeters, as a result, chili sauce to be wiped out of the ham, that is, ham sausage on what chili sauce is not. If you switch to the top line SVG, that is, the line is out of sight. As we get smaller, the Dashoffset will find that the chili sauce on ham sausage appears at 1.1, as if it were smeared from the roots of ham and intestines. Iv. support from CSS3 animation

The power of inline SVG is that it is also an HTML element, can be controlled by CSS properties, handle the traditional high and wide positioning, border background color, and some special properties of SVG itself can be supported by CSS, even in CSS3 animation animation.

As a result, the SVG stroke animation effect We discussed above can easily be implemented using CSS3 animation without any JavaScript, which is the first demo page implementation.

Its CSS code focus:

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

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

1000 there is no special meaning, just big enough to ensure that the length of each path is large, you can also be 1500, the difference is the stroke faster.

Properties CSS3 Animation's small partners should see the meaning of the above code, 5-second animation, Stroke-dashoffset from 1000 to 0. Stroke animation formation.

The above CSS code can be almost universal. No matter how complex your SVG path is, it can be rendered in a stroke animation format. According to their own tests, ie10+ under no animation effect, not

Is that CSS does not support SVG-related stroke properties, but animations that do not support stroke-related properties in animation.

What's the use of the above effect, I think of the following scenarios: The demo time to show some points step-by-step, or pictures, such as hover stroke effect, or site tip Note the arrow guide effect, etc., are useful. Technology + your Brain of continuous creativity, there is a wonderful creative experience. v. Length of the 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 ();

Six, fry a chestnut

<svg  x= "0px" y= "0px" width= "340px" height= "333px" xmlns= "Http://www.w3.org/2000/svg"  >
  <path id= "path" fill= "#FFFFFF" stroke=