文章/答案/技术大牛

发布

问使用svg的透明渐变蒙版
EN

Stack Overflow用户

提问于 2017-08-01 16:31:28

回答 1查看 768关注 0票数 0

我需要一些关于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的整个结构来实现？

任何帮助都是非常感谢的。

css

svg

javascript

html

回答 1

Stack Overflow用户

发布于 2017-08-01 18:21:20

首先，应用于SVG元素的掩码应该没有问题。有一些浏览器兼容性与应用于HTML元素的SVG蒙版有关，但当它们应用于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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45432753

复制

相似问题

问使用svg的透明渐变蒙版
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用svg的透明渐变蒙版EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用svg的透明渐变蒙版
EN