SVGMaskElement: height property

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.

The read-only height property of the SVGMaskElement interface returns an SVGAnimatedLength object containing the value of the height attribute of the <marker>.

Note: Although this property is read-only, it is merely a container for two values you can modify, baseVal and animVal.

Value

An SVGAnimatedLength object. The baseVal property of this object returns an SVGLength, the value of which returns the height value.

Examples

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();

Specifications

Specification
CSS Masking Module Level 1
# dom-svgmaskelement-height

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
height

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support