Recent learning, for SVG to achieve text neon animation is very interesting, but also relatively easy to achieve, the effect is good, such as the picture below.
stroke-dasharray
stroke-dashoffset
stroke-dasharray
It’s a list of comma and/or white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, Then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2. –MDN
Length specifies the length of the dash, and percentage specifies the length of the gap. If an odd number of values are provided, the sequence of values is repeated once, resulting in an even number of values. So if it’s 4, it’s the same thing as 4, 4; 5,3,2 is the same as 5,3,2,5,3,2; See the following example.
<svg viewBox="0 0 30 15" xmlns="http://www.w3.org/2000/svg"> <! --> <line x1="0" y1="1" x2="30" y2="1" stroke="black"/ > <! -- when two attributes are equal, split --> <line x1="0" y1="3" x2="30" y2="3" stroke="black"
stroke-dasharray="4"/ > <! --> <line x1="0" y1="5" x2="30" y2="5" stroke="black"
stroke-dasharray="4 1"/ > <! When the number of attributes is odd, 4, 1, 2 will be arranged in the same order as 4, 1, 2, 4, 1, 2 --> <line x1="0" y1="Seven" x2="30" y2="Seven" stroke="black"
stroke-dasharray="4 1 2"/ > <! -- If the number of attributes is even, it will be sorted by 4, 1, 2, 3, 4, 1, 2, 3 --> <line x1="0" y1="9" x2="30" y2="9" stroke="black"
stroke-dasharray="4 1 2 3" />
</svg>
Copy the codeOr you can imagine that this is a sequence of two different keys in the loop, that is, const dasharray = {length, percentage,length, percentage… }, length specifies the length of the dash, percentage specifies the length of the notch, and then assign the value cyclically after stroke-dasharray. Therefore, the following conclusions can be drawn
Const dasharray = {length: 4, percentage: 1,length: 4, percentage: 1,length: 4, percentage: 1, percentage: 4, percentage: 1… }
Stoke-dasharray: 4 1 2 const dasharray = {length: 4, percentage: 1,length: 2, percentage: 4,length: 1, percentage: 2… }
stroke-dashoffset
The stroke-dashoffset attribute is a presentation attribute defining an offset on the rendering of the associated dash array.–MDN
This property sets the offset of the dash array associated with it. This is the array in the stroke-Dasharray property above. The amount of the property offset from the drawing starting point is positive (right or clockwise) and negative (left or counterclockwise).
The following is an example to show the red offset with respect to the black segment.
<line x1="0" y1="Seven" x2="30" y2="Seven" stroke="black"
stroke-dasharray="3 1" />
<line x1="0" y1="9" x2="30" y2="9" stroke="rgba(255,0,0,.5)"
stroke-dasharray="3 1"
stroke-dashoffset="- 3" />
<line x1="0" y1="11" x2="30" y2="11" stroke="black"
stroke-dasharray="3 1" />
<line x1="0" y1="13" x2="30" y2="13" stroke="rgba(255,0,0,.5)"
stroke-dasharray="3 1"
stroke-dashoffset="1" />
Copy the code
<svg viewBox="- 3 0 33 20" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="10" cy="10" rx="5" ry="5" fill="none" stroke=# 000
stroke-dasharray="4" stroke-dashoffset= "0"stroke-width=1 ></ellipse> <! -- Ellipse cx= --> < Ellipse Cx ="10" cy="10" rx="5" ry="5" fill="none" stroke=red
stroke-dasharray="4" stroke-dashoffset= "4" stroke-width=1></ellipse>
</svg>
Copy the code
Let’s do a line animation
With that in mind, we need to add a little bit of knowledge.
- D: This tag is followed by a collection of entire paths
- Stroke: Path color
- Stroke-width: indicates the path width
- Fill: the color of a shape
- Polyline: The tag is used to create shapes that contain only lines
Now we can make some line animations to further our understanding of the above two properties. The whole idea is this. Draw the path, then measure the length of the path, then set stroke-dasharray with CSS3’s animation to animate the SVG image.
First of all, the line animation needs to set a path, which we can set freely. The author draws a path in pen on AI. Set the Polyline tag with only straight lines. Others can be marked with the tag PATH.
<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <! -- Set artboard to 400*400, top left coordinate of window to 00, window to 400*400--> <polyline stroke="black" stroke-width="3px" fill="none" points="0.34 0.37 70.47 64.62 187 52.19 187.34 128.87 298.03 122.44 357.85 11.93"></polyline>
</svg>
Copy the code
var path = document.querySelector(.cls); var length = path.getTotalLength(); console.log(length); // The length is 525.52Copy the codeSetting animation Properties
.cls{ animation: move 3s linear infinite; } @keyframes move{0%{stroke-dasharray: 0 525.52px; 100%} {stroke - dasharray: 525.52 px; }}Copy the codeThis is where our simple line effect comes in
.cls{ animation: move 5s linear infinite; } @keyframes move{0%{stroke-dasharray: 0 525.52px; stroke:red; 50%} {stroke - dasharray: 262.75 px; stroke: blue; 100%} {stroke - dasharray: 525.52 px; stroke: yellow; }}Copy the code
SVG’s neon effect is also achieved with stroke-Dasharray and stroke-Dashoffset. Here we use the symbol and the G tag
- Symbol is similar to a composition, but has some additional features. Usually placed in labels for reuse. In addition to composition, you can also use templates to define your ICONS. Templates are almost the same as combos, but you can get extra Settings to control the viewbox and aspect ratio.
- G combines many shapes. Placing the combined shape in a allows it to be reused.
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <! -- XMLNS namespace, separate from HTML --> <symbol id="text">
<text x="30%" y="35%" class="text"</text> </symbol> <g> <use xlink:href="#text" class="use-text"></use>
<use xlink:href="#text" class="use-text"></use>
<use xlink:href="#text" class="use-text"></use>
<use xlink:href="#text" class="use-text"></use>
<use xlink:href="#text" class="use-text"></use>
</g>
</svg>
Copy the codeThe stroke-Dasharray and stroke-Dashoffset properties give this effect, where the five colors are stroke-Dashoffset with a total offset of 35%, and then each color has a 7% offset, of which each color is 7 out of 35. So for every 35 percent of each text path, there are 5 colors that account for 7 percent.
*{ margin: 0; padding: 0; } .text{ font-size: 100px; } svg{ position: absolute; /* margin-left: 10px; */ width: 100%; height: 100%; background-color: #000; } .use-text{ fill: none; stroke: white; stroke-dashoffset: 35%; Stroke - dasharray: 0 87.5%; stroke-width: 2px; } .use-text:nth-child(1) { stroke: #360745; animation: animation1 8s infinite ease-in-out forwards; } .use-text:nth-child(2) { stroke: #D61C59; animation: animation2 8s infinite ease-in-out forwards; } .use-text:nth-child(3) { stroke: #E7D84B; animation: animation3 8s infinite ease-in-out forwards; } .use-text:nth-child(4) { stroke: #EFEAC5; animation: animation4 8s infinite ease-in-out forwards; } .use-text:nth-child(5) { stroke: #1B8798; animation: animation5 8s infinite ease-in-out forwards; } @keyframes animation1 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 7%; } 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 7%; } } @keyframes animation2 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 14%; } 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 14%; } } @keyframes animation3 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 21%; } 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 21%; } } @keyframes animation4 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 28%; } 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 28%; } } @keyframes animation5 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 35%; } 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 35%; } } </style>Copy the codeSo that becomes the special effect here.
The article
Web site