SVGMaskElement: Eigenschaft height
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 height der Schnittstelle SVGMaskElement gibt ein SVGAnimatedLength-Objekt zurück, das den Wert des Attributs height des Elements <mask> enthält.
Wert
Ein SVGAnimatedLength-Objekt. Die Eigenschaft baseVal dieses Objekts gibt ein SVGLength zurück, dessen Wert dem Wert von height 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="height"
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.height.animVal.value;
const baseValue = mask.height.baseVal.value;
log.textContent = `The 'height.animVal' is ${animValue}.\n`;
log.textContent += `The 'height.baseVal' is ${baseValue}.`;
requestAnimationFrame(displayLog);
}
displayLog();
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # dom-svgmaskelement-height |