CODEWITHSUNDEEP
javascripthtmlcssfirefoxsvg
Sergiu Toarca
Sergiu Toarca

Reputation: 2749

SVG clipPath not working in Firefox when defined dynamically

I have the following code:

<div class="blah" style="clip-path: url(#clippath)"></div>
<svg width="0" height="0"><defs><clipPath id="clippath">
  <rect x="0" y="0" height="100" width="100"></rect>
</clipPath></defs></svg>

This correctly clips the blah div to 100x100 square. However, if I use JavaScript to add the svg to the DOM (rather than it being there from page load), it no longer works. Specifically, I'd like to create a dynamic clip path based on events happening in my app.

What am I doing wrong? This only needs to work in Firefox (which unfortunately doesn't support clip-path: polygon(...))

Upvotes: 1

Views: 959

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

Make sure you are you using the namespace variant of createElement.

document.createElementNS("http://www.w3.org/2000/svg", "clipPath");

If you are just using createElement() then the element will be going into the default namespace (ie HTML) and won't be recognised by the SVG renderer.

Upvotes: 5

Related Questions