动态定义时，SVG clipPath 在 Firefox 中不起作用答案

【问题标题】：SVG clipPath not working in Firefox when defined dynamically动态定义时，SVG clipPath 在 Firefox 中不起作用
【发布时间】：2014-06-05 01:07:10
【问题描述】：

我有以下代码：

<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(...)）

【问题讨论】：

标签： javascript html css firefox svg

【解决方案1】：

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

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

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

【讨论】：