SVG <pattern> Element
Last Updated :
31 Mar, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations in HTML canvas. The <pattern> element is used to fill shapes with patterns made up of images. It fills the shapes in a tiled fashion.
Syntax:
<pattern> . . . </pattern>
Attributes:
- patternUnits: It defines the co-ordinates of x, y, height and width.
- patternContentUnits: It defines the region of the pattern.
- preserveAspectRatio: It shows an element with a viewBox giving a aspect ratio must fit into a viewport with a different aspect ratio.
- xlink:href: It defines a reference IRI to a resource.
Example 1:
HTML
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<defs>
<pattern id="pattern" x="0" y="0"
width="10" height="10"
patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10"
style="stroke:lightgreen;
fill:white" />
</pattern>
</defs>
<rect x="10" y="10" width="100"
height="100" style="stroke: #000000;
fill: url(#pattern);" />
<g fill="#FFFFFF" stroke="black"
font-size="12" font-family="Verdana">
<text x="13" y="65">
GeeksForGeeks
</text>
</svg>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="350">
<defs>
<pattern id="in" x="2" y="2"
width="6" height="6"
patternUnits="userSpaceOnUse">
<rect x="2" y="2" width="4"
height="8" stroke="green"
fill="red" />
</pattern>
<pattern id="out" x="13" y="13"
width="50" height="50"
patternUnits="userSpaceOnUse">
<circle cx="4" cy="4" r="18"
stroke="black"
stroke-width="4px"
fill="url(#in)" />
</pattern>
</defs>
<rect x="1" y="5" width="200"
height="200" stroke="green"
fill="url(#out)" />
</svg>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...