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)");

动态添加形状/蒙版到内联svg

1 个答案: