Search code examples
javascriptsvgpropertiesmask

What is the property accessor for a mask on SVG elements?

I've been going through documentation, but cannot seem to find an answer to the following question...

I want to add a mask attribute to a circle element in my project, but would like to avoid circle.setAttribute() if I can.

<!-- HTML -->
<circle />

/* JS */
let node = document.querySelector(`circle`);

circle.id = `foo`;
circle.mask = `url(#bar)`; // This isn't valid...?
circle.setAttribute(`mask`, `url(#bar)`); // What I want to avoid doing. But substitutes the invalid line above.

/* Resulting HTML after JS fires */
<circle id="foo" mask="url(#bar)" />

What is the property accessor for a mask on SVG elements? Does one exist?

Solution

  • mask is a mapped CSS attribute so you can set it via circle.style.mask = ... that won't give you quite the specificity of an attribute but it's the closest you can get without using setAttribute.