Your Search Results

    <pattern>

    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

    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>

    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.

    Specifications

    Specification Status Comment
    Scalable Vector Graphics (SVG) 2
    The definition of '<pattern>' in that specification.    		 Working Draft  
    Scalable Vector Graphics (SVG) 1.1 (Second Edition)
    The definition of '<pattern>' in that specification.    		 Recommendation Initial definition

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support ? ? ? ? ?
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    Document Tags and Contributors

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