Table Of Contents
Notes on creating patterns using SVG.
Last Tended | - |
---|---|
Planted | |
Status | Seed |
Definition
SVG elements (such as <rect>
or <circle>
) can be defined as children of the <pattern>
element.
Together, these children make a tile.
The pattern element's id
can be used as the fill
of an element, which will repeat the tile until the element is completely covered.
Number of Tiles
The width & height values of a <pattern>
determines how many tiles of that pattern are rendered.
localhost:3000
import "./styles.css";
import "./styles.css";
patternUnits
A pattern attribute that indicates which coordinate system to use for the <pattern>
element.
Value can be:
objectBoundingBox
(default): the coordinate system defined on the pattern element.userSpaceOnUse
: the user coordinate system (the coordinate system of the svg element using the pattern). This is like rendering the pattern in the background of the<svg>
. It is hidden & only parts of it are exposed by shapes that use the pattern.
Below is an example using userSpaceOnUse
.
Change the highlighted x
& y
values to move bottom square, showing how the pattern remains consistent with the other shapes.
localhost:3000
import "./styles.css";
import "./styles.css";
Misc.
patternContentUnits
has no effect ifviewBox
is specified on the<pattern>
element.- to do:
patternTransform
- to do:
preserveAspectRatio