Nuestros voluntarios aún no han traducido este artículo al Español. ¡Únete a nosotros y ayúdanos a traducirlo!
También puedes leer el artículo en English (US).

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.

<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 since SVG 2
This attribute reference 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

CategoriesContainer element
Permitted contentAny 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
patternUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari Full support 3WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Full support 3Samsung Internet Android ?
patternContentUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari Full support 3WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Full support 3Samsung Internet Android ?
patternTransformChrome ? Edge ? Firefox ? IE ? Opera ? Safari Full support 3WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Full support 3Samsung Internet Android ?
xChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
yChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
heightChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
widthChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?
hrefChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: scottastrophic, dvincent, Jeremie, fscholz, mattwojo, Sebastianz, Tigt, kscarfone
Última actualización por: scottastrophic,