In recent two days, I studied the drawing method of SVG graphics and how SVG dynamic graph is presented.

Focus on the stroke-Dashoffset and stroke-dasharray attributes

Stroke-dasharray: used to create dashed lines, followed by array because the values are arrays

stroke-dasharray = '10'
stroke-dasharray = '10, 5'
stroke-dasharray = '20, 10, 5'Copy the code



Stroke-dashoffset: offset

This property is the offset from the starting point, so if you move x by a positive number, you move x to the left, and if you move x by a negative number, you move x to the right. Note that regardless of the direction of the offset, remember that dasharray is circular, i.e., dashed line-interval – dashed line-interval



The above effects are as follows: 1. No dashed line 2. Stroke-dasharray =”3 1″, dashed line is not offset, that is, stroke-dashoffset= 0 3. We can see that the area starts at this interval, then loop 3-1,3-1 dashes, dashes, dashes, dashes, dashes, dashes, dashes, dashes, dashes and dashes. 5. Stroke-dashoffset =”1″, the offset is positive, and the dashed line is shifted 1 unit to the left, resulting in the same effect as line 4

These two properties can be used to draw beautiful dynamic renderings

Paste code examples:

<! DOCTYPE html>

<html>

 <style>

 .text{ stroke: #F60A0A; animation: stroke 10s ; animation-iteration-count:infinite; animation-delay:0s; } 

@keyframes stroke { 100% { stroke-dashoffset: 100; stroke-dasharray: 5 5; }}

 </style> 

<body>

The < SVG XMLNS = “http://www.w3.org/2000/svg” version = “1.1” >

<p style=” max-width: 100%; clear: both; min-height: 1em; stroke:red; stroke-width:4 stroke-dashoffset: 0; stroke-dasharray: 300 0;” />

</svg> 

 </body> 

</html>