mozilla
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

    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,