< svg‎ | elements(Redirected from svg/elements/patterrn)
Jump to: navigation, search


This article is Ready to Use.

W3C Recommendation


Defines a block of graphics which can be used as a repeating pattern tile to paint the fill or stroke of other elements.

Overview Table

DOM Interface SVGElement


There is no data available for topic "svg", feature "pattern". If you think that there should be data available, consider opening an issue.


In the following code example, a pattern fills a circle. The pattern is made up of a repeated series of wedge-shaped paths. Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see the pattern-filled circle.

The pattern-filled circle will look like this:

    <!-- Create SVG container. -->
    <svg width="400" height="400">
      <!-- Definitions -->
        <!-- Define pattern for fill. -->
        <pattern id="myPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="30" height="30" >
          <!-- Create path for individual piece of pattern. -->
          <path d="M 0 10 L 25 30 L 50 30 Z" stroke="darkorchid"
                        stroke-width="3" fill="cornflowerblue" />
      <!-- Circle that will use pattern definition for fill. -->
      <circle cx="100" cy="100" r="75" stroke="forestgreen"
                stroke-width="3" fill="url(#myPattern)" />



Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent core HTML attributes, properties, events, methods, and styles.

You can use a pattern to fill or stroke an object by using a predefined graphic object that is replicated (that is, tiled) at fixed intervals along the x-axis and y-axis to cover the areas to be painted. You can define a pattern by using a pattern element. You can then reference the pattern by the fill and stroke properties on a given graphics element to specify that the given element is filled or stroked with the referenced pattern.

The x, y, width, height, and patternUnits attributes define a reference rectangle somewhere on the infinite SVG canvas. The reference rectangle has its upper-left corner at (x, y) and its lower-right corner at (x + width, y + height). The tiling theoretically extends a series of such rectangles to infinity along the x-axis (positive) and y-axis (negative), with rectangles starting at (x + m · width, y + n · height) for each possible m and n integer value.

For more information, see Scalable Vector Graphics (SVG) 1.0 Specification.

Standards information


The SVGPatternElement object has these events:

  • onload: Occurs when the browser has fully parsed the element and all of its descendants.

The SVGPatternElement object has these methods:

  • hasExtension: Determines if the specified extension is supported.

The SVGPatternElement object has these properties:

  • className: Gets the names of the classes that are assigned to this object.
  • clipPath: Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
  • externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
  • focusable: Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
  • height: Gets or sets the height of an element.
  • href: Gets an xlink:href attribute of an element.
  • mask: Sets or retrieves a value that indicates a SVG mask.
  • ownerSVGElement: Gets the nearest ancestor svg element.
  • patternContentUnits: Gets or sets the patternContentUnits property on the given pattern element, defining the coordinate system for the contents of the pattern element.
  • patternTransform: Gets or sets the definition of an optional transformation from the pattern

coordinate system onto the target coordinate system.

  • patternUnits: Gets or sets the patternUnits property on the given pattern element, defining the coordinate system for attributes x, y, width and height.
  • preserveAspectRatio: Gets an XML value that indicates whether to force uniform graphic scaling.
  • requiredExtensions: Gets a white space-delimited list of required language extensions.
  • requiredFeatures: Gets or sets a white space-delimited list of feature strings.
  • style: Gets a style object.
  • systemLanguage: Gets or sets a comma-separated list of language names.
  • viewBox: Gets a value that indicates how a graphic scales to fit a container element.
  • viewportElement: Gets the element that established the current viewport.
  • width: Defines the width of an element.
  • x: Gets or sets the x-coordinate value.
  • xmlbase: Gets or sets the base attribute on the element.
  • xmllang: Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
  • xmlspace: Gets or sets a value that indicates whether white space is preserved in character data.
  • y: Gets or sets the y-coordinate value.

Related specifications

Specification Status Related Changes
SVG 1.1 W3C Recommendation


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]