SVGMaskElement: x 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-only x property of the SVGMaskElement interface returns an SVGAnimatedLength object containing the value of the x attribute of the <mask>. It represents the x-axis coordinate of the top-left corner of the masking area.
Value
An SVGAnimatedLength object in the coordinate system defined by SVGMaskElement.maskUnits. The baseVal property of this object returns an SVGLength, the value of which returns the initial x value.
Examples
html
<div>
<svg viewBox="-10 -10 120 120" width="100" height="100">
<mask id="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="x"
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 id="log"></pre>
js
const mask = document.getElementById("mask");
function displayLog() {
const animValue = mask.x.animVal.value;
const baseValue = mask.x.baseVal.value;
log.textContent = `The 'x.animVal' is ${animValue}.\n`;
log.textContent += `The 'x.baseVal' is ${baseValue}.`;
requestAnimationFrame(displayLog);
}
displayLog();
Specifications
| Specification |
|---|
| CSS Masking Module Level 1 # dom-svgmaskelement-x |
Browser compatibility
Loading…