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

html,
body,
svg {
  height: 100%;
}
```



```html
<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` 
Deprecated

 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`

XLink Attributes

Most notably: `xlink:title`

Usage notes
-----------

|  |  |
| --- | --- |
| Categories | Container element |
| Permitted content | Any number of the following elements, in any order:Animation elementsDescriptive elementsShape elementsStructural elementsGradient elements`<a>`, `<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
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.