SVGMaskElement: height Eigenschaft
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.
Die schreibgeschützte height
Eigenschaft der SVGMaskElement
Schnittstelle gibt ein SVGAnimatedLength
Objekt zurück, das den Wert des height
Attributs des <marker>
enthält.
Wert
Ein SVGAnimatedLength
Objekt. Die baseVal
Eigenschaft dieses Objekts gibt ein SVGLength
zurück, dessen Wert den height
Wert zurückgibt.
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
Specification |
---|
CSS Masking Module Level 1 # dom-svgmaskelement-height |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
height |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.