SVGMaskElement: y property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The read-onlyy property of theSVGMaskElement interface returns anSVGAnimatedLength object containing the value of they attribute of the<mask>. It represents the y-axis coordinate of thetop-left corner of the masking area.
Value
AnSVGAnimatedLength object. ThebaseVal property of this object returns anSVGLength, the value of which returns they value.
Examples
html,body,svg { height: 100%;}html
<div> <svg viewBox="-10 -10 120 120" width="100" height="100"> <mask x="0" maskUnits="userSpaceOnUse"> <!-- 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="y" values="0;80;0" 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></pre>js
const mask = document.getElementById("mask");function displayLog() { const animValue = mask.y.animVal.value; const baseValue = mask.y.baseVal.value; log.textContent = `The 'y.animVal' is ${animValue}.\n`; log.textContent += `The 'y.baseVal' is ${baseValue}.`; requestAnimationFrame(displayLog);}displayLog();Specifications
| Specification |
|---|
| CSS Masking Module Level 1 # dom-svgmaskelement-y |