SVG basics | SVGDEFS elements, SYMBOL elements, and USE elements-

This article introduces the basic knowledge of SVG: svgdefs elements, svgsymbol elements, and svguse elements .,.

　　 Svg defs Element

SVG An element is used to predefine an element so that it can be reused in an SVG image. For example, you can make some images into a group and use Element to define it, and then you can reuse it as a simple image in the SVG image. See the following example:

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
6. 
   
7. 
   

In The image defined in the element is not directly displayed on the SVG image. To display them, use Element to introduce them. The following code is used:

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
6. 
   
7. 
   
8. 
   
9. 
   
10. 
    

To reference Element, must be in Set an ID on the element and reference it by ID. Elements are introduced through the xlink: href attribute. Element. Note that you need to add a # Before the ID #.

In In the element, the x and y attributes are used to specify the display position of the reusable image. Note that The position of the image in the element is 0, 0. When an element references it, its positioning point is converted The position specified by the x and y attributes.

The returned results of the above Code are as follows:

The green dots in the above SVG image are not part of the sample code. They are used to display 2 X and y coordinates of the element.

Which elements can be defined as elements in defs?

You can add the following elements Element:

• Any graphic elements, such as rect and line
• G
• Symbol
  

　 Svg symbol Element

SVG Elements are used to define reusable symbols. Embedded in The image in the element is not directly displayed unless you use Element to reference it.

Below is a usage Simple Element example:

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
6. 
   

　　 The element requires an ID Element reference.

One The element can have preserveAspectRatio and viewBox attributes. While Elements cannot have these attributes. Therefore, compared Use in element To reuse the image, use Element may be a better choice.


　　 Svg use element

SVG Element can reuse a predefined SVG image multiple times in the SVG image, including Element and Element. Reusable images can be defined in Or external.

Below is a usage Element example:

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
6. 
   
7. 
   
8. 
   
9. 
   
10. 
    
11. 
    

The above example shows The Element.

To reference Element, which must be assigned an ID and referenced by the ID.

The returned results of the above Code are as follows:

We can also reference Element. The element can reference any element in the SCG image, as long as the element has a unique ID number, for example:

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
6. 
   
7. 
   
8. 
   

In this example The element defines Element. Then Element to reference this Element. The returned results are as follows:

Note that both the original and reused images are displayed. Because the original image is not defined in Or Element. So it is visible.

You can set CSS styles for referenced images. You can Use the style attribute in the element to set its style for the reusable image. For example:

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
6. 
   
7. 
   
8. 
   
9. 
   

Note that in the above Code, the original image does not set a style, and it will be the default style (black ).

This article copyright belongs to the jQuery house, reproduced please indicate the source: http://www.htmleaf.com/ziliaoku/... g/201506132029.html