我在 SVG 元素(仅路径)上使用动画(只需使用 JavaScript 非常频繁地切换路径的可见性属性)。 SVG 具有背景图像。一些显示的路径必须在笔画上有背景图像(看起来就像它们正在删除路径一样)。我使用 SVG 的屏蔽功能来执行此操作，如下所示:
var t = 0;
var displayDictionary = {};
function fillDisplayDictionary()
{
var paths = document.querySelectorAll("svg path");
for(var index=0; index < paths.length; index++)
{
var path = paths[index];
var pathDisplayTime = parseInt(path.getAttribute("data-t"));
displayDictionary[pathDisplayTime] = path;
}
}
function displayNextElement()
{
displayDictionary[t].style.visibility = "visible";
t++;
if(t == 5)
clearInterval(interval);
}
fillDisplayDictionary();
interval = setInterval(displayNextElement, 40);svg path
{
visibility: hidden;
}<!DOCTYPE html>
<html>
<body>
<svg height="400" width="450">
<!-- this is the background image -->
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>
<!-- these are ordinary paths -->
<path data-t="0" d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" />
<path data-t="1" d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" />
<path data-t="2" d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" />
<path data-t="3" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" />
<mask id="mask">
<!-- this is the erasing path -->
<path data-t="4" d="M 0 0 L 400 450" stroke="white" stroke-width="20" />
</mask>
<!-- this is an image identical to the background image, and it is masked by the above path-->
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450" mask="url(#mask)"></image>
</svg>
</body>
</html>笔画上有或没有背景图像的路径太多。这在 Chrome 中运行良好。但是，在 FireFox 中，动画过程在显示删除路径(即笔划上带有背景图像的路径)时变得非常缓慢。有没有其他方法可以显示 Firefox 响应良好的删除路径。
最佳答案
您不需要使用蒙版图像进行 overdraw 。
只需将蒙版应用于线条即可。
<svg height="400" width="450">
<!-- this is the background image -->
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>
<!-- these are ordinary paths -->
<g mask="url(#mask)">
<path data-t="0" d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" />
<path data-t="1" d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" />
<path data-t="2" d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" />
<path data-t="3" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" />
</g>
<mask id="mask">
<!-- this is the erasing path -->
<rect width="100%" height="100%" fill="white"/>
<path data-t="4" d="M 0 0 L 400 450" stroke="black" stroke-width="20" />
</mask>
</svg>关于javascript - 如何让 SVG 路径的笔触带背景图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46682923/