如何使 SVG 路径的笔画成为背景图像？答案

【问题标题】：How to make the stroke of an SVG path take the background image?如何使 SVG 路径的笔画成为背景图像？
【发布时间】：2017-10-11 08:02:56
【问题描述】：

我在 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 响应良好的擦除路径。

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

您不需要使用蒙版的图像进行过度绘制。

只需将遮罩应用到线条上即可。

<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>

【讨论】：

它更快，但在 Firefox 中仍然落后。有没有一种简单的方法可以在一个组上应用多个蒙版？
为什么您需要多个口罩？您始终可以向掩码定义添加更多元素。或者您可以将该组包装在另一个组中，然后对其应用第二个蒙版。