<pattern>
<a><defs><g><marker><mask><missing-glyph><pattern><svg><switch><symbol>SVG Elements
- A
- B-C
- D
- E
- F
<feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feDistantLight><feFlood><feFuncA><feFuncB><feFuncG><feFuncR><feGaussianBlur><feImage><feMerge><feMergeNode><feMorphology><feOffset><fePointLight><feSpecularLighting><feSpotLight><feTile><feTurbulence><filter><font><font-face><font-face-format><font-face-name><font-face-src><font-face-uri><foreignObject>
- G
- H
- I
- J-L
- M
- N-P
- Q-R
- S
- T
- U
- V-Z
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
viewBoxattribute 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-
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 bothhrefandxlink:hrefare set,xlink:hrefwill be ignored and onlyhrefwill 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
- 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 |
|---|
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # Patterns |
Browser compatibility
BCD tables only load in the browser