动态定义时,SVG clipPath无法在Firefox中运行

Question

我有以下代码:

<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>

这正确地将blahdiv 剪辑为100x100平方.但是,如果我使用JavaScript将svg添加到DOM(而不是从页面加载那里),它就不再起作用了.具体来说,我想基于我的应用程序中发生的事件创建动态剪辑路径.

我究竟做错了什么？这只需要在Firefox中工作(遗憾的是不支持clip-path: polygon(...))

Answer 1

确保您使用的是createElement的命名空间变体.

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

如果您刚刚使用,createElement()则元素将进入默认命名空间(即HTML),并且SVG渲染器将无法识别.