RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/svg/elements/pattern below:

pattern · WebPlatform Docs

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>
    
    <svg width="400" height="400">
      
      <defs>
        
        <pattern id="myPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="30" height="30" >
          
          <path d="M 0 10 L 25 30 L 50 30 Z" stroke="darkorchid"
                        stroke-width="3" fill="cornflowerblue" />
        </pattern>
      </defs>
      
      <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

Scalable Vector Graphics: Gradients and Patterns, Section 13.4.5

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

Microsoft Developer Network: [Windows Internet Explorer API reference Article]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4