SVGClipPathElement: clipPathUnits-Eigenschaft

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die schreibgeschützte clipPathUnits-Eigenschaft der Schnittstelle SVGClipPathElement reflektiert das Attribut clipPathUnits eines <clipPath>-Elements, das das Koordinatensystem definiert, das für den Inhalt des Elements verwendet werden soll.

Hinweis: Obwohl diese Eigenschaft schreibgeschützt ist, ist sie lediglich ein Container für zwei Werte, die Sie modifizieren können, nämlich baseVal und animVal.

Wert

Eine SVGAnimatedEnumeration, die das Koordinatensystem repräsentiert. Die möglichen Werte sind in der Schnittstelle SVGUnitTypes definiert:

0 (SVG_UNIT_TYPE_UNKNOWN): Der Typ ist nicht einer der vordefinierten Typen.
1 (SVG_UNIT_TYPE_USERSPACEONUSE): Entspricht einem Wert von userSpaceOnUse für das clipPathUnits-Attribut und bedeutet, dass alle Koordinaten innerhalb des Elements sich auf das Benutzerkoordinatensystem beziehen, das definiert wurde, als der Clipping-Pfad erstellt wurde. Es ist der Standardwert.
2 (SVG_UNIT_TYPE_OBJECTBOUNDINGBOX): Entspricht einem Wert von objectBoundingBox für das Attribut und bedeutet, dass alle Koordinaten innerhalb des Elements relativ zur Begrenzungsbox des Elements sind, auf das der Clipping-Pfad angewendet wird. Das bedeutet, dass der Ursprung des Koordinatensystems die obere linke Ecke der Objektbegrenzungsbox ist und die Breite und Höhe der Objektbegrenzungsbox als Länge von 1 Einheit betrachtet werden.

Beispiele

html,
body,
svg {
  height: 100%;
}

html

<div>
  <svg viewBox="0 0 100 100" width="200" height="200">
    <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
      <circle cx="50" cy="50" r="35" />
    </clipPath>

    <clipPath id="clip2" clipPathUnits="objectBoundingBox">
      <circle cx=".5" cy=".5" r=".35" />
    </clipPath>

    <!-- Some reference rect to materialized to clip path -->
    <rect id="r1" x="0" y="0" width="45" height="45" />
    <rect id="r2" x="0" y="55" width="45" height="45" />
    <rect id="r3" x="55" y="55" width="45" height="45" />
    <rect id="r4" x="55" y="0" width="45" height="45" />

    <!-- The first 3 rect are clipped with userSpaceOnUse units -->
    <use clip-path="url(#clip1)" href="#r1" fill="red" />
    <use clip-path="url(#clip1)" href="#r2" fill="blue" />
    <use clip-path="url(#clip1)" href="#r3" fill="yellow" />

    <!-- The last rect is clipped with objectBoundingBox units -->
    <use clip-path="url(#clip2)" href="#r4" fill="green" />
  </svg>
</div>
<pre id="log"></pre>

const clipPath1 = document.getElementById("clip1");
const clipPath2 = document.getElementById("clip2");

const log = document.getElementById("log");

log.textContent = `The clipPath used three times has a 'clipPathUnits' value of ${clipPath1.clipPathUnits.baseVal}
The clipPath used three times has a 'clipPathUnits' value of ${clipPath2.clipPathUnits.baseVal}`;

Spezifikationen

Spezifikation
CSS Masking Module Level 1 # dom-svgclippathelement-clippathunits

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden