{{ SVGRefElem() }}
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
properties on other graphics elements to fill or stroke those elements with the referenced pattern.
Usage context
{{svginfo}}
Example
Source code | Output result |
---|---|
{{ embed_text("pattern.svg", "xml") }} | {{ EmbedSVG("pattern.svg",120,120) }} |
Attributes
Global attributes
- Conditional processing attributes »
- Core attributes »
- Presentation attributes »
- Xlink attributes »
- {{ SVGAttr("class") }}
- {{ SVGAttr("style") }}
- {{ SVGAttr("externalResourcesRequired") }}
- {{ SVGAttr("viewBox") }}
Specific attributes
- {{ SVGAttr("patternUnits") }}
- {{ SVGAttr("patternContentUnits") }}
- {{ SVGAttr("patternTransform") }}
- {{ SVGAttr("x") }}
- {{ SVGAttr("y") }}
- {{ SVGAttr("width") }}
- {{ SVGAttr("height") }}
- {{ SVGAttr("xlink:href") }}
- {{ SVGAttr("preserveAspectRatio") }}
DOM Interface
This element implements the SVGPatternElement
interface.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}} | {{Spec2('SVG2')}} | |
{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}} | {{Spec2('SVG1.1')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
{{SVGRef}}