I met some problems in the article about the implementation process of SVG+CSS3 in the promotion video of Strawberry Music Festival. It is really a huge project. I have already met two problems in the process of writing the article, which need to be written separately. Here’s the thing

<clip-path>

<use xlink:href="#"/>Declaration when the tag references

Because the dynamic triangle is used as a clipping path mask and itself, I instinctively thought of using the

tag to define the triangle. When I was confident to use the

tag to reference the triangle, the browser gave me a big mouth. It looks like this:

What do you mean? The referenced part is not defined, not defined! No! Checked a lot of times again and again, sure, and then began a variety of endless reverie and transformation, can not define the dynamic effect of the element? To change! Can only be defined with

? To change! Change to change! Then, reality is still crashing, and it’s there to laugh at you, whether you want it or not. More worrying is that this goods in codepen performance that call a smooth, I big Chrome how, bully me a small artist, do not understand the code ah. Then began the helpless pain of the code to go through the road, oh oh, no, no, not called to go through the road, I was with the previous SVG file source comparison. Sure enough

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
Copy the code

This is the beginning of a working SVG file, and the error begins like this

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
Copy the code

Good, less a declaration XMLNS: xlink = “http://www.w3.org/1999/xlink”, by the xlink specification defines the href attribute. This property is used as a means of linking to other resources. Okay, problem solved.

Graphic problems with the <use> tag reference when defining clipping masks

I’m not going to take a screenshot because the browser doesn’t have an error, but the clipping mask doesn’t work. I take it for granted that it should be the following, after writing the heart is also happy, feel that their

use perfect, repeatedly nested

<symbol id="reTri"> <! --> <polygon points=""/> </symbol> <symbol><! -- Define clipPath mask --> <clipPath id="mix">
<use xlink:href="#reTri"/ > <! -- Reference triangle definition --> </clipPath> </symbol> <g clip-path="url(#mix)"> <! Use a clipping mask for circles --> <circle... /> </g>Copy the code



is not allowed to be a symbol referenced by the

tag when defining a clipPath (or


, which has the same effect). It doesn’t matter. It’s just a question of writing it twice.




<symbol><! -- Define clipPath mask --> <clipPath id="mix">
<polygon points=""/ > <! -- Define triangle directly --> </clipPath> </symbol> <g clip-path="url(#mix)"> <! Use a clipping mask for circles --> <circle... /> </g>Copy the code

The circles and triangles can be animated by themselves, so they are relatively simple. Instead, the class attribute (id is not used because the same animation effect is used twice) can refer to the animation attribute defined.

You can obviously see that the white part of the yellow circle is the shape of the white circle with the triangle clipping mask. In the end, all you need to do is overlay the same triangle on the top layer with the stroke property and no fill property.

Summary: Clip about clipping mask – path is a very powerful feature, clipping mask itself can be a dynamic effect of the graphics, use the clipping mask graphics can also be effective drive, move, can change the innumerable combinations, grammar is simple, the only need to pay attention to is to define the clipping mask when not to use the < use > tag reference graph, Also, the mask is a pure path and does not need to define properties such as fill stroke.