SVGMaskElement: width-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die schreibgeschützte Eigenschaft width der Schnittstelle SVGMaskElement gibt ein SVGAnimatedLength-Objekt zurück, das den Wert des Attributs width des Elements <mask> enthält.
Wert
Ein SVGAnimatedLength-Objekt. Die Eigenschaft baseVal dieses Objekts gibt ein SVGLength-Objekt zurück, dessen Wert dem Wert von width entspricht.
Beispiele
html
<div>
<svg viewBox="-10 -10 120 120" width="100" height="100">
<mask id="mask" x="0" maskUnits="objectBoundingBox">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100" height="100" fill="white" />
<!-- Everything under a black pixel will be invisible -->
<path
d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="black" />
<animate
attributeName="width"
values="144;0;144"
dur="5s"
repeatCount="indefinite" />
</mask>
<polygon points="-10,110 110,110 110,-10" fill="orange" />
<!-- with this mask applied, we "punch" a heart shape hole into the circle -->
<circle cx="50" cy="50" r="50" mask="url(#mask)" />
</svg>
</div>
<pre id="log"></pre>
js
const mask = document.getElementById("mask");
function displayLog() {
const animValue = mask.width.animVal.value;
const baseValue = mask.width.baseVal.value;
log.textContent = `The 'width.animVal' is ${animValue}.\n`;
log.textContent += `The 'width.baseVal' is ${baseValue}.`;
requestAnimationFrame(displayLog);
}
displayLog();
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # dom-svgmaskelement-width |