SVG <pattern> Element

SVG can use the <pattern> element to define a pattern. It is used to tile graphic elements.

To fill or stroke an object with predefined shapes, the pattern element is used. The pattern element allows predefined shapes to be repeated (or tiled) at a fixed interval along the x-axis and y-axis, thereby covering the area to be colored. First, define the pattern using the pattern element, and then use the fill or stroke attribute on the specified graphic element to refer to the pattern used for filling or stroking.

<svg　width="120"　height="120"　viewBox="0　0　120　120"　　　　
xmlns="http://www.w3.org/2000/svg"　version="1.1"　　　　
xmlns:xlink="http://www.w3.org/1999/xlink">　　　　
<defs>　　　　
<pattern　id="Triangle"　width="10"　height="10"　patternUnits="userSpaceOnUse">　　　　
<polygon　points="5,0　10,10　0,10"/>　　　　
　　　　</pattern>　　　　
</defs>　　　　
<circle　cx="60"　cy="60"　r="50"　　fill="url(#Triangle)"/>　　　　
</svg>

The running effect is as follows:

Usage Explanation

• The id attribute of <pattern> defines the unique name of the pattern.

• patternUnits is used to define the x, y, width, and height attributes.

• cx and cy are the x and y axis coordinates of the pattern boundary box.