Javascript 向内联svg动态添加形状/遮罩

我有一个站点，其中包含一系列元素，单击这些元素时，会将内联svg代码添加到该元素中。svg实质上是为“虹膜擦除”设置动画，以将元素转换为白色。来自单独html文档的代码被加载到一系列div中。加载完所有图像后，我想在svg代码中添加一个掩码，以便将其恢复原状

我使用检查图像何时完成加载。这是成功的。掩码也被正确地添加到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>')

$（“#selProject”）.append（“”）

这可能不是最干净的方法，但这是我知道的方法

稍后，在使用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>');
    });
});

$（“#selProject”）.waitForImages（函数（）{
$（“#projectPageInfo”）.waitForImages（函数（）{
$（“svg”）。追加（“”）；
});
});

---

当掩码与要添加的初始svg代码分离时，它可以正常工作，并按其应有的方式设置动画。但是，我需要在加载图像之前不发生这种情况，现在，尽管已成功将遮罩添加到svg中，但它不会设置动画。我遗漏了什么？

我怀疑这是典型的jQuery问题。不能依靠JQuery来正确处理SVG元素。jQuery设计用于HTML，而不是SVG，因为SVG的元素位于不同的命名空间中

第一个附加之所以有效，是因为浏览器知道如何处理

元素，并且做了正确的事情。但是，第二次追加失败，因为

元素将在默认（即HTML）名称空间中创建，而不是在SVG名称空间中创建

如果查看浏览器开发工具中附加的

元素的DOM属性，您可能会发现它的名称空间错误（即不是SVG）

作为一种解决方案，我将尝试将

添加回原始SVG中，并且仅在需要使用掩码时设置

掩码

属性。换句话说，删除：

mask="url(#mask1)"

然后，当您希望应用遮罩时：

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

---

对不起，您能澄清一下“设置

掩码

属性”是什么意思吗？