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 and height values of a <pattern> element determines how many tiles of that pattern are rendered.

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 and only parts of it are exposed by shapes that use the pattern.

Below is an example using userSpaceOnUse. Change the x and y values to move bottom square, showing how the pattern remains consistent with the other shapes.

Misc.

• ▪ patternContentUnits has no effect if viewBox is specified on the <pattern> element.
• ▪ to do: patternTransform
• ▪ to do: preserveAspectRatio

Feedback

Have any feedback about this note or just want to comment on the state of the economy?