動態添加形狀/蒙版到內聯svg

Question

我有一個包含一系列元素的網站，當點擊它們時，將內聯svg代碼添加到該元素。 svg基本上是動畫“虹膜擦拭”以使元素變白。 來自單獨的html文檔的代碼被加載到一系列div中。 當所有圖像都加載完畢后，我想在svg代碼中添加一個掩碼，將虹膜擦回原來的樣子。

我正在使用waitForImages.js檢查圖像加載完成的時間。 這是成功的。 掩碼也正確地添加到svg中。 然而，面具動畫。

這是添加svg的初始代碼：

$("#selProject").append('<svg id="circleCont" x="0px" y="0px" viewBox="0 0 360 360" enable-background="new 0 0 360 360"><circle class="circ" cx="50%" cy="50%" r="0.01" stroke="#FFFFFF" stroke-width="0.5" fill="none"><animate attributeName="r" from="0.01" to="100%" dur="0.2" begin="0s" fill="freeze"/><animate attributeName="stroke-width" from="0.5" to="100" dur="0.2" begin="0s" fill="freeze"/></circle><circle class="circ" cx="50%" cy="50%" r="0.01" stroke="#FFFFFF" stroke-width="0.5" fill="none"><animate attributeName="r" from="0.01" to="100%" dur="0.2" begin="0.1s" fill="freeze"/><animate attributeName="stroke-width" from="0.5" to="200" dur="0.2" begin="0.1s" fill="freeze"/></circle><circle class="circ" cx="50%" cy="50%" r="0.01" fill="#FFFFFF" mask="url(#mask1)"><animate attributeName="r" from="0.01" to="100%" dur="0.3" begin="0.2s" fill="freeze"/></circle></svg>')

這可能不是最干凈的方式，但這是我知道的方式。

之后，經過一些其他代碼/使用ajax加載其他html文檔

$("#selProject").waitForImages(function() {
    $("#projectPageInfo").waitForImages(function() {
        $("svg").append('<mask id="mask1"><rect fill="white" width="100%" height="100%" /><circle id="circmask" class="circ" cx="50%" cy="50%" r="0.01" fill="#000000"><animate attributeName="r" from="0.01" to="100%" dur="0.3" begin="0s" fill="freeze"/></circle></mask>');
    });
});

當它被添加的初始svg代碼分開時，掩碼正常工作，並且它應該具有動畫。 但是，我需要它才能在圖像加載之前發生，現在，盡管成功地將掩碼添加到svg，但它沒有動畫。 我錯過了什么？

Answer 1

我懷疑這是典型的jQuery問題。 不能依賴JQuery來使用SVG元素做正確的事情。 jQuery旨在使用HTML，而不是SVG，其元素位於不同的命名空間中。

第一個附加有效，因為瀏覽器知道如何處理<svg>元素，並做正確的事情。 但是第二個附加失敗，因為<mask>元素將在默認（即HTML）命名空間而不是SVG命名空間中創建。

如果你在瀏覽器的開發工具中查看附加的<mask>元素的DOM屬性，你可能會發現它有錯誤的（即不是SVG）命名空間。

作為一種解決方案，我會嘗試將<mask>添加回原始SVG，並且只在需要使用掩碼時設置mask屬性。 換句話說，刪除：

mask="url(#mask1)"

然后當你想要應用蒙版時：

document.getElementById("id-of-masked-circle").setAttribute("mask", "url(#mask1)");