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: