maskUnits

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 maskUnits gibt an, welches Koordinatensystem für die Geometrieeigenschaften des Elements <mask> verwendet wird.

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

<mask>

mask

Für <mask> legt maskUnits das Koordinatensystem für die Geometrieattribute (x, y, width und height) des Elements fest.

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

userSpaceOnUse: Dieser Wert gibt an, dass sich alle Koordinaten der Geometrieattribute auf das Benutzerkoordinatensystem beziehen, das beim Erstellen der Maske festgelegt war.
objectBoundingBox: Dieser Wert gibt an, dass alle Koordinaten der Geometrieattribute Bruchteile oder Prozentwerte der Begrenzungsbox des Elements darstellen, auf das die Maske angewendet wird. Die Begrenzungsbox lässt sich so betrachten, 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"
    maskUnits="userSpaceOnUse"
    x="20%"
    y="20%"
    width="60%"
    height="60%">
    <rect fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx="50" cy="50" r="35" />
  </mask>

  <mask
    id="myMask2"
    maskUnits="objectBoundingBox"
    x="20%"
    y="20%"
    width="60%"
    height="60%">
    <rect fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx="50" cy="50" 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-maskunits

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