maskContentUnits

Baseline Weitgehend verfügbar

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

Das Attribut maskContentUnits gibt an, welches Koordinatensystem für den Inhalt des <mask>-Elements verwendet werden soll.

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

<mask>

Beispiel

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

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask1" maskContentUnits="userSpaceOnUse">
    <rect fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx="50" cy="50" r="35" />
  </mask>

  <mask id="myMask2" maskContentUnits="objectBoundingBox">
    <rect fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx=".5" cy=".5" r=".35" />
  </mask>

  <!-- Some reference rect to materialized the mask -->
  <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 masked with useSpaceOnUse units -->
  <use mask="url(#myMask1)" href="#r1" fill="red" />
  <use mask="url(#myMask1)" href="#r2" fill="red" />
  <use mask="url(#myMask1)" href="#r3" fill="red" />

  <!-- The last rect is masked with objectBoundingBox units -->
  <use mask="url(#myMask2)" href="#r4" fill="red" />
</svg>

Maske

Für <mask> definiert maskContentUnits das verwendete Koordinatensystem für den Inhalt des Elements.

Wert	`userSpaceOnUse` \| `objectBoundingBox`
Standardwert	`userSpaceOnUse`
Animierbar	Ja

userSpaceOnUse: Dieser Wert gibt an, dass alle Koordinaten innerhalb des <mask>-Elements sich auf das Benutzerkoordinatensystem beziehen, wie es beim Erstellen der Maske definiert wurde.
objectBoundingBox: Dieser Wert gibt an, dass alle Koordinaten innerhalb des <mask>-Elements relativ zum Begrenzungsrahmen des Elements sind, auf das die Maske angewendet wird. Ein Begrenzungsrahmen kann so betrachtet werden, als wäre der Inhalt des <mask> an eine "0 0 1 1" viewBox gebunden.

Spezifikationen

Spezifikation
CSS Masking Module Level 1 # element-attrdef-mask-maskcontentunits

Browser-Kompatibilität

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