javascript - 动态定义时，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 渲染器识别。