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.
Das maskUnits-Attribut gibt an, welches Koordinatensystem für die Geometrieeigenschaften des <mask>-Elements verwendet werden soll.
Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
Beispiel
<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>
mask
Für <mask> definiert maskUnits das verwendete Koordinatensystem für die Geometrieattribute (x, y, width und height) des Elements.
| Wert | userSpaceOnUse | objectBoundingBox |
|---|---|
| Standardwert | objectBoundingBox |
| Animierbar | Ja |
userSpaceOnUse-
Dieser Wert gibt an, dass alle Koordinaten für die Geometrieattribute sich auf das Benutzerkoordinatensystem beziehen, das beim Erstellen der Maske definiert wurde.
objectBoundingBox-
Dieser Wert gibt an, dass alle Koordinaten für die Geometrieattribute Bruchteile oder Prozentsätze des Begrenzungsrahmens des Elements darstellen, auf das die Maske angewendet wird. Ein Begrenzungsrahmen könnte als das gleiche wie beim Binden des Inhalts der
<mask>an eine"0 0 1 1"viewBoxbetrachtet werden.
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # element-attrdef-mask-maskunits |