動態定義時，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中（而不是從頁面加載中添加到svg中），它將不再起作用。 具體來說，我想根據應用程序中發生的事件創建動態剪輯路徑。

我究竟做錯了什么？ 這僅需要在Firefox中工作（不幸的是，它不支持clip-path: polygon(...) ）

Answer 1

確保您使用的是createElement的名稱空間變體。

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

如果僅使用createElement()則該元素將進入默認名稱空間（即HTML），並且SVG渲染器將無法識別該元素。