如何让SVG路径的笔画获取背景图片？

我在SVG元素（仅路径）上使用动画（只需通过JavaScript非常频繁地切换路径的可见性属性）。 SVG具有背景图像。一些显示的路径必须在笔画上有背景图像（看起来好像它们是擦除路径）。我使用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 --> 
 
\t <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响应良好的擦除路径。

来源

2017-10-11 Wessam Sharaf

您不需要透过蒙版图像透支。

只需将遮罩应用于线。

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

来源

2017-10-11 09:02:54

这是更快，但它仍然是在Firefox滞后。有一种简单的方法可以在组上应用多个掩码吗？ –

为什么你需要多个面具？您始终可以在面具定义中添加更多元素。或者你可以将该组包装在另一个组中，然后再应用第二个掩码。 –

如何让SVG路径的笔画获取背景图片？

回答

相关问题