clip-path

Das Präsentationsattribut clip-path definiert oder verknüpft einen Clipping-Pfad mit dem zugehörigen Element.

Hinweis: Als Präsentationsattribut hat clip-path auch ein entsprechendes CSS-Eigenschaftsgegenstück: clip-path. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>

  <!-- Top-left: Apply a custom defined clipping path -->
  <rect
    x="1"
    y="1"
    width="8"
    height="8"
    stroke="green"
    clip-path="url(#myClip)" />

  <!-- Top-right: Apply a CSS basic shape on a fill-box
       geometry. This is the same as having a custom clipping
       path with a clipPathUnits set to objectBoundingBox -->
  <rect
    x="11"
    y="1"
    width="8"
    height="8"
    stroke="green"
    clip-path="circle() fill-box" />

  <!-- Bottom-left -->
  <rect
    x="1"
    y="11"
    width="8"
    height="8"
    stroke="green"
    clip-path="circle() stroke-box" />

  <!-- Bottom-right: Apply a CSS basic shape on a view-box
       geometry. This is the same as having a custom clipping
       path with a clipPathUnits set to userSpaceOnUse -->
  <rect
    x="11"
    y="11"
    width="8"
    height="8"
    stroke="green"
    clip-path="circle() view-box" />
</svg>

Verwendungshinweise

Wert <url> | [ <basic-shape> || <geometry-box> ] | none
Standardwert none
Animierbar Ja
<geometry-box>

Zusätzliche Information, wie eine <basic-shape> auf ein Element angewendet wird: fill-box gibt an, dass die Objektumrahungsbox verwendet wird; stroke-box gibt an, dass die Objektumrahungsbox inklusive der Kontur verwendet wird; view-box gibt an, dass die nächstgelegene SVG-Ansichtsbox als Referenz verwendet wird.

Hinweis: Weitere Informationen zur clip-path-Syntax finden Sie auf der Referenzseite der CSS-Eigenschaft clip-path.

Spezifikationen

No specification found

No specification data found for undefined.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser-Kompatibilität

Siehe auch