The

tag is a tag used in SVG for reusing primitives, similar to a template, instantiated with the

tag.

Please refer to the official document: symbol – SVG-MDN.

Let’s look at a simple example.

We draw a five-pointed star with path:

<svg 
    width="300"
    height="300"
    style="border: 1px solid #acc; margin: 10px;"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
>
    <path d="M 100,0 L160,180 L10,60 L190,60 L40,180 Z" fill="orange" stroke="black" stroke-width="3" />
</svg>
Copy the code

If we want to make multiple copies, we can use this path as a template:

<svg 
    width="300"
    height="300"
    style="border: 1px solid #acc; margin: 10px;"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
>
    <symbol id="pentagram" viewBox="0 0 300 300">
        <path d="M 100,0 L160,180 L10,60 L190,60 L40,180 Z" fill="orange" stroke="black" stroke-width="3" />
    </symbol>

    <use xlink:href="#pentagram" width="100" height="100" />
    <use xlink:href="#pentagram" x="50" y="50" width="150" height="150" />
    <use xlink:href="#pentagram" x="150" y="150" width="200" height="200" />
</svg>
Copy the code

Now let’s adjust the position of the

template (this can be done in any way). Here I offset it by modifying the viewBox:

<symbol id="pentagram" viewBox="90, 90, 300, 300">
    <path d="M 100,0 L160,180 L10,60 L190,60 L40,180 Z" fill="orange" stroke="black" stroke-width="3" />
</symbol>
Copy the code

To fit the previous graphic coordinates, we offset the instance x and y as well (90, 90), while paying attention to the effect of scaling:

<svg 
    width="300"
    height="300"
    style="border: 1px solid #acc; margin: 10px;"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
>
    <symbol id="pentagram" viewBox="90, 90, 300, 300">
        <path d="M 100,0 L160,180 L10,60 L190,60 L40,180 Z" fill="orange" stroke="black" stroke-width="3" />
    </symbol>

    <use xlink:href="#pentagram" transform="Translate (30, 30)" width="100" height="100" />
    <use xlink:href="#pentagram" transform="Translate (45,)" x="50" y="50" width="150" height="150" />
    <use xlink:href="#pentagram" transform="Translate (60, 60)" x="150" y="150" width="200" height="200" />
</svg>
Copy the code

Then we look at the graph:

Sometimes after

is instantiated, the graphics are not displayed or displayed incompletely. At first, I thought it was because the width and height were not enough, but it was not, because we only changed the offset of

. After testing, we found that although the

template could not be rendered. However, if the template is outside the visible area of the canvas, it will not render properly. This is a feature of the

template.









<svg 
    width="300"
    height="300"
    style="border: 1px solid #acc; margin: 10px;"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="90, 90, 300, 300"
>
    <path d="M 100,0 L160,180 L10,60 L190,60 L40,180 Z" fill="orange" stroke="black" stroke-width="3" />
</svg>
Copy the code

The conclusion is that while the template shows only part of the canvas field of view, the rendered instance will show only that part of the field of view.