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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Sie können dieses Attribut mit dem folgenden SVG-Element verwenden:

<mask>

mask

Für <mask> legt maskContentUnits das Koordinatensystem fest, das für den Inhalt des Elements verwendet wird.

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

userSpaceOnUse: Dieser Wert gibt an, dass sich alle Koordinaten innerhalb des <mask>-Elements auf das Benutzerkoordinatensystem beziehen, das beim Erstellen der Maske festgelegt wurde.
objectBoundingBox: Dieser Wert gibt an, dass alle Koordinaten innerhalb des <mask>-Elements relativ zur Begrenzungsbox des Elements sind, auf das die Maske angewendet wird. Die Begrenzungsbox kann so betrachtet werden, als wäre der Inhalt von <mask> an eine viewBox mit dem Wert "0 0 1 1" gebunden.

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>

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