pattern

by 2 contributors:

A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using the pattern element and then referenced by properties fill and stroke on a given graphics element to indicate that the given element shall be filled or stroked with the referenced pattern.

Usage context

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>
Normative document SVG 1.1 (2nd Edition)

Example

Source code Output result
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <pattern id="Triangle" 
                 width="10" height="10"
                 patternUnits="userSpaceOnUse">
            <polygon points="5,0 10,10 0,10"/>
	    </pattern>
    </defs>

    <circle cx="60" cy="60" r="50"
            fill="url(#Triangle)"/>
</svg>

» pattern.svg

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGPatternElement interface.

Document Tags and Contributors

Contributors to this page: kscarfone, Jeremie
Last updated by: kscarfone,