<pattern>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The <pattern>
element defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area.
The <pattern>
is referenced by the fill
and/or stroke
attributes on other graphics elements to fill or stroke those elements with the referenced pattern.
Example
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)" />
<circle
cx="180"
cy="50"
r="40"
fill="none"
stroke-width="20"
stroke="url(#star)" />
</svg>
Attributes
height
-
This attribute determines the height of the pattern tile. Value type: <length>|<percentage>; Default value:
0
; Animatable: yes href
-
This attribute reference a template pattern that provides default values for the
<pattern>
attributes. Value type: <URL>; Default value: none; Animatable: yes patternContentUnits
-
This attribute defines the coordinate system for the contents of the
<pattern>
. Value type:userSpaceOnUse
|objectBoundingBox
; Default value:userSpaceOnUse
; Animatable: yesNote: This attribute has no effect if a
viewBox
attribute is specified on the<pattern>
element. patternTransform
-
This attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system. Value type: <transform-list>; Default value: none; Animatable: yes
patternUnits
-
This attribute defines the coordinate system for attributes
x
,y
,width
, andheight
. Value type:userSpaceOnUse
|objectBoundingBox
; Default value:objectBoundingBox
; Animatable: yes preserveAspectRatio
-
This attribute defines how the SVG fragment must be deformed if it is embedded in a container with a different aspect ratio. Value type: (
none
|xMinYMin
|xMidYMin
|xMaxYMin
|xMinYMid
|xMidYMid
|xMaxYMid
|xMinYMax
|xMidYMax
|xMaxYMax
) (meet
|slice
)? ; Default value:xMidYMid meet
; Animatable: yes viewBox
-
This attribute defines the bound of the SVG viewport for the pattern fragment. Value type: <list-of-numbers> ; Default value: none; Animatable: yes
width
-
This attribute determines the width of the pattern tile. Value type: <length>|<percentage> ; Default value:
0
; Animatable: yes x
-
This attribute determines the x coordinate shift of the pattern tile. Value type: <length>|<percentage> ; Default value:
0
; Animatable: yes xlink:href
Deprecated-
This attribute references a template pattern that provides default values for the
<pattern>
attributes. Value type: <URL>; Default value: none; Animatable: yesNote: For browsers implementing
href
, if bothhref
andxlink:href
are set,xlink:href
will be ignored and onlyhref
will be used. y
-
This attribute determines the y coordinate shift of the pattern tile. Value type: <length>|<percentage> ; Default value:
0
; Animatable: yes
Usage context
Categories | Container element |
---|---|
Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements <a> , <clipPath> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # Patterns |
Browser compatibility
BCD tables only load in the browser