使用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的透明渐变蒙版

回答

相关问题