maskContentUnits
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das maskContentUnits
Attribut 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:
Beispiel
<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 könnte als gleich angesehen werden, als wäre der Inhalt der<mask>
an einen"0 0 1 1"
viewBox
gebunden.
Spezifikationen
Specification |
---|
CSS Masking Module Level 1 # element-attrdef-mask-maskcontentunits |
Browser-Kompatibilität
BCD tables only load in the browser