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.
html,body,svg { height:100% }
<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 since SVG 2- This attribute reference 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
Global attributes
- Core Attributes
- Most notably:
id
,tabindex
- Styling Attributes
class
,style
- Conditional Processing Attributes
- Most notably:
requiredExtensions
,systemLanguage
- Presentation Attributes
- Most notably:
clip-path
,clip-rule
,color
,color-interpolation
,color-rendering
,cursor
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,pointer-events
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
- XLink Attributes
- Most notably:
xlink:title
Usage notes
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> , <altGlyphDef> , <clipPath> , <color-profile> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of '<pattern>' in that specification. |
Candidate Recommendation | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<pattern>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
pattern | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support 3 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support Yes |
height | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support 3 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support Yes |
href | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari Full support 12.1 | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS Full support 12.2 | Samsung Internet Android ? |
patternContentUnits | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari Full support 3 | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS Full support 3 | Samsung Internet Android ? |
patternTransform | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari Full support 3 | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS Full support 3 | Samsung Internet Android ? |
patternUnits | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari Full support 3 | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS Full support 3 | Samsung Internet Android ? |
width | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support 3 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support Yes |
x | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support 3 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support Yes |
xlink:href | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support 3 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support Yes |
y | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support 3 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.