動態添加一個形狀/掩碼到內聯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

$("#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>'); 
    }); 
}); 

另一個HTML文檔中的掩模正確地工作時，它是分開添加的初始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)");