<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
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
-
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
- 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