javascript - 将形状/ mask 动态添加到内联 svg

Question

我有一个包含一系列元素的站点，单击这些元素时，会向该元素添加内联 svg 代码。 svg 基本上为“虹膜删除”设置动画以将元素变为白色。来自单独 html 文档的代码被加载到一系列 div 中。当所有图像加载完成后，我想在 svg 代码中附加一个 mask ，以将虹膜删除回原来的样子。

我正在使用 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 代码分开时， mask 可以正常工作，并且应该具有动画效果。但是，我需要它在图像加载之前不要发生，现在，尽管成功地将蒙版添加到 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)");