This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

pattern

Summary

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

Examples

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:



<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <!-- Create SVG container. -->
    <svg width="400" height="400">
      <!-- Definitions -->
      <defs>
        <!-- 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" />
        </pattern>
      </defs>
      <!-- Circle that will use pattern definition for fill. -->
      <circle cx="100" cy="100" r="75" stroke="forestgreen"
                stroke-width="3" fill="url(#myPattern)" />
    </svg>
  </body>
</html>

Notes

Remarks

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

Members

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

SVG 1.1
W3C Recommendation

Attributions