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.

Die schreibgeschützte clipPathUnits-Eigenschaft des SVGClipPathElement-Interfaces spiegelt das Attribut clipPathUnits eines <clipPath>-Elements wider, das das Koordinatensystem definiert, das für den Inhalt des Elements verwendet wird.

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

Wert

Eine SVGAnimatedEnumeration, die das Koordinatensystem darstellt. Die möglichen Werte sind in der SVGUnitTypes-Schnittstelle 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 auf das Benutzerkoordinatensystem verweisen, wie es beim Erstellen des Clipping-Pfads definiert 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 zum Begrenzungsrahmen des Elements sind, auf das der Clipping-Pfad angewendet wird. Das bedeutet, dass der Ursprung des Koordinatensystems die obere linke Ecke des Begrenzungsrahmens des Objekts ist und die Breite und Höhe des Begrenzungsrahmens des Objekts als eine 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