Question

我需要一些关于svg的帮助。有一个＆＃34;背景图像＆＃34;。另一个＆＃34;图像＆＃34;已经奠定了它。＆＃34;图像＆＃34;必须有一个孔切出来，以便背景图像闪耀。我通过使用svg实现了这一点：

＆＃13;

<!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>

＆＃13;

我无法使用css的掩码过滤器导致浏览器兼容性。我不想使用svg / js框架。

到目前为止一切顺利。现在我想更进一步。

我希望这个洞有一个透明的渐变。因此，内部rects的边界并不像当前版本那么难。我不知道该怎么做。

此外，我希望动画这个洞，以便随着时间的推移变大。我会用js来做。还有另外一种方法吗？也许通过改变html的整个结构？

感谢任何帮助。

Answer 1

首先，应用于SVG元素的蒙版应该没有问题。有一些与SVG蒙版相关的浏览器兼容性应用于HTML元素，但是当它们应用于SVG元素时则不适用。

事实上，面具是您问题的明显解决方案。为了获得孔的柔化边缘，我们将模糊滤镜应用于矩形，然后将其用作蒙版来创建孔。

＆＃13;

  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%;
  }
<

＆＃13;

<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>

＆＃13;

使用svg

1 个答案: