W3cubDocs

/SVG

<pattern>

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

Note: 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, and height. 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 references a template pattern that provides default values for the <pattern> attributes. Value type: <URL>; Default value: none; Animatable: yes

Note: For browsers implementing href, if both href and xlink:href are set, xlink:href will be ignored and only href 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

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) 2
# Patterns

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
pattern Yes 12 Yes Yes Yes 3 Yes Yes Yes Yes 3 Yes
height Yes 12 Yes Yes Yes 3 Yes Yes Yes Yes 3 Yes
href 50 No No No 37 12.1 50 50 No 37 12.2 5.0
patternContentUnits No No No No No 3 No No No No 3 No
patternTransform No No No No No 3 No No No No 3 No
patternUnits No No No No No 3 No No No No 3 No
width Yes 12 Yes Yes Yes 3 Yes Yes Yes Yes 3 Yes
x Yes 12 Yes Yes Yes 3 Yes Yes Yes Yes 3 Yes
xlink_href Yes 12 Yes Yes Yes 3 Yes Yes Yes Yes 3 Yes
y Yes 12 Yes Yes Yes 3 Yes Yes Yes Yes 3 Yes

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern