clipPath

Overview Table

DOM Interface: SVGElement

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:



<!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>



<!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

Scalable Vector Graphics: Clipping, Masking and Compositing, Section 14.6.1

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.

Attributions

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