使用SVG的透明渐变蒙版
[英]Transparent gradient mask using svg
问题描述
I need some help about svg's. 
我需要有关svg的帮助。 There is a "background image". 有一个“背景图像”。 Another "image" is laid over it. 另一个“图像”放置在其上。 The "image" has to have a hole cut out of it so that the background image is shining through. 必须在“图像”上切出一个孔，以使背景图像发光。 I achieved this by using 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>
I could not use mask filters of css cause of browser compatibility. 我无法使用CSS的掩码过滤器来实现浏览器兼容性。 I dont want to use a svg/js framework. 我不想使用svg / js框架。
So far so good. 到现在为止还挺好。 Now i want to go a step further. 现在我想更进一步。
I want this hole to have a transparent gradient. 我希望该孔具有透明渐变。 So that the inner rects borders are not that hard as in current version. 这样内部矩形边框就不会像当前版本那样硬。 I dont know how to do it. 我不知道该怎么做。
Furthermore i want to animate this hole to get bigger over time. 此外，我想为该孔设置动画，使其随着时间的推移而变大。 I would do it by using js. 我会通过使用js来做到这一点。 Is there another way? 还有另一种方法吗？ Maybe by changing the whole structure of html? 也许通过更改html的整体结构？
Any help is appreciated. 任何帮助表示赞赏。
1 个解决方案
解决方案1
2 2017-08-01 10:21:20
Firstly, there should be no issue with masks applied to SVG elements. 首先，应用于SVG元素的蒙版应该没有问题。 There are some browser compatibility related to SVG masks being applied to HTML elements, but not when they are applied to SVG elements. 浏览器与将SVG掩码应用于HTML元素有关，但与某些浏览器兼容，但当将它们应用于SVG元素时则没有。
In fact a mask is the obvious solution to your issue. 实际上，遮罩是解决您问题的明显方法。 To get the soft edges to the hole, we'll apply a blur filter to a rectangle, then use that as a mask to create the hole. 为了使柔和的边缘进入孔，我们将模糊滤镜应用于矩形，然后将其用作蒙版来创建孔。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.