动态定义时，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>

这正确地将blah div剪辑为100x100平方。但是，如果我使用JavaScript将svg添加到DOM（而不是从页面加载那里），它就不再起作用了。具体来说，我想根据我的应用中发生的事件创建动态剪辑路径。

我做错了什么？这只需要在Firefox中工作（不幸的是，它不支持clip-path: polygon(...)）

Answer 1

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

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

如果您只是使用createElement()，那么元素将进入默认命名空间（即HTML），并且不会被SVG渲染器识别。