clipPath

< svg‎ | elements
Jump to: navigation, search

clipPath

This article is In Progress.



Needs Summary: This article does not have a summary. Summaries give a brief overview of the topic and are automatically included on some listing pages that link to this article.


Overview Table

DOM Interface SVGElement


Compatibility

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

Examples

In the following code example, the clipPath element is used to create a clipping path that will visually hide part of an element. The clipping path is defined by a circle in a defs element and has a defined URL.

<path d="M 50,100 Q 150,50 250,100" stroke="hotpink"
    stroke-width="10" fill="white"/>

The original path would have looked like this:

HTML

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <svg width="400" height="400">
      <path d="M 50,100 Q 150,50 250,100" stroke="hotpink"
          stroke-width="10" fill="white" />
    </svg>
  </body>
</html>

The path after being clipped by the circle looks like this:

<svg width="400" height="400">
  <defs>
    <clipPath id="myClipPath">
      <circle cx=100 cy=100 r=50 />
    </clipPath>
  </defs>
  <path d="M 50,100 Q 150,50 250,100" stroke="hotpink"
      stroke-width="10" fill="white" clip-path="url(#myClipPath)"/>
</svg>

HTML

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <svg width="400" height="400">
      <defs>
        <clipPath id="myClipPath">
          <circle cx=100 cy=100 r=50 />
        </clipPath>
      </defs>
      <path d="M 50,100 Q 150,50 250,100" stroke="hotpink"
         stroke-width="10" fill="white" clip-path="url(#myClipPath)"/>
    </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.

Standards information

Members

The SVGClipPathElement object has these events:

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

The SVGClipPathElement object has these methods:

  • getBBox: Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
  • getCTM: Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
  • getScreenCTM: Gets the transformation matrix from the current user units to the screen coordinate system.
  • getTransformToElement: Gets the transformation matrix that transforms from the user coordinate system on the current element to the user coordinate system on the specified target element.
  • hasExtension: Determines if the specified extension is supported.

The SVGClipPathElement object has these properties:

  • className: Gets the names of the classes that are assigned to this object.
  • clipPathUnits: Gets or sets the given SVGClipPathElement element.
  • externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
  • farthestViewportElement: Gets a value that represents the farthest ancestor svg 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).
  • nearestViewportElement: Gets a value that indicates which element established the current viewport.
  • ownerSVGElement: Gets the nearest ancestor svg element.
  • 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.
  • transform: Gets the value of a transform attribute.
  • viewportElement: Gets the element that established the current viewport.
  • 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.

Attribution

This article contains content originally from external sources.

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