使用svg的透明漸變蒙版

我需要一些關於svg的幫助。有一個「背景圖像」。另一個「圖像」放在它上面。「圖像」必須有一個洞，以便背景圖像通過。我用SVG實現這一點：使用svg的透明漸變蒙版

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
<title>Title of the document</title> 
 
<style> 
 
    body{ 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    } 
 
    #svg-door { 
 
    background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg); 
 
    background-size: cover; 
 
    box-sizing: border-box; 
 
    padding: 100px; 
 
    width: 100%; 
 
    height: 500px; 
 
    } 
 
    #wood { 
 
    border-radius: 50%; 
 
    } 
 
</style> 
 
    </head> 
 
<body background="https://www.w3schools.com/css/img_fjords.jpg" > 
 
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door"> 
 
    <defs> 
 
    <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768"> 
 
     <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/> 
 
    </pattern> 
 
    </defs> 
 
    <path xmlns="http://www.w3.org/2000/svg" d=" M0,0 225,0 225,300 0,300 z M105,50, 180,50 180,80 105,80 z " 
 
     fill="url(#wood)" fill-rule="evenodd"/> 
 
</svg> 
 
</body>

我不能使用瀏覽器的兼容性的CSS事業的面具過濾器。我不想使用svg/js框架。

到目前爲止這麼好。現在我想更進一步。

我想要這個洞有一個透明的漸變。因此，內部矩形邊界並不像現在的版本那麼困難。我不知道該怎麼做。

此外，我想動畫這個洞隨着時間的推移變大。我會通過使用js來做到這一點。有另一種方法嗎？也許通過改變html的整體結構？

任何幫助表示讚賞。

來源

2017-08-01 nico 711

首先，應用於SVG元素的蒙版應該沒有問題。有一些瀏覽器兼容性與SVG蒙版應用於HTML元素相關，但不適用於SVG元素。

事實上，面具是解決您的問題的明顯方法。爲了獲得柔和的邊緣，我們將一個模糊濾鏡應用到一個矩形，然後用它作爲掩模來創建這個洞。

body{ 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    } 
 
    #svg-door { 
 
    background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg); 
 
    background-size: cover; 
 
    box-sizing: border-box; 
 
    padding: 100px; 
 
    width: 100%; 
 
    height: 500px; 
 
    } 
 
    #wood { 
 
    border-radius: 50%; 
 
    } 
 
<

<body background="https://www.w3schools.com/css/img_fjords.jpg" > 
 

 
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door"> 
 
    <defs> 
 
    <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768"> 
 
     <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/> 
 
    </pattern> 
 
    
 
    <mask id="hole"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <path d="M105,50, 180,50 180,80 105,80 z" filter="url(#hole-blur)"/> 
 
    </mask> 
 

 
    <filter id="hole-blur"> 
 
     <feGaussianBlur stdDeviation="2"/> 
 
    </filter> 
 
    </defs> 
 

 
    <path d="M0,0 225,0 225,300 0,300 z" fill="url(#wood)" mask="url(#hole)"/> 
 
</svg> 
 

 
</body>

來源

2017-08-01 10:21:20

至於問題的動畫部分，我會建議使用，而不是''''，然後你可以很容易動畫x'的'值，回答'y '，'width'，'height'（比動畫'd'更容易） –

是的，我忘了回答動畫部分，但是Niet是正確的。一個矩形可能更直接的動畫。 S.O.有很多問題。關於動畫SVG元素。 –

使用svg的透明漸變蒙版

回答

相關問題