动态地将形状/蒙版添加到内联 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)");