如何讓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路徑的筆畫獲取背景圖片？

回答

相關問題