使用多边形模糊SVG背景

Question

我正在尝试用多边形svg形状模糊背景。下面是svg。这是Bin

<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;opacity: 0.5;">
  <defs>
   <filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
      <feGaussianBlur stdDeviation="5" in="SourceGraphic" result="blurSquares"></feGaussianBlur>
      <feComponentTransfer in="blurSquares" result="opaqueBlur">
        <feFuncA type="linear" intercept="1"></feFuncA>
      </feComponentTransfer>
      <feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"></feBlend>
   </filter>
  </defs>
  <g filter="url(#blurry)">
    <polygon points="0,0 100,0 100,200 0,200 0,0"></polygon>
  </g>
</svg>

我希望看到背景图像的一部分变得模糊。但它并没有像预期的那样工作。需要进行哪些更改才能使其正常工作？

Answer 1

SVG中的模糊过滤器没有可靠的方法来自动模糊页面上SVG后面的内容。

为了达到你想要的效果，必须将背景图像复制到SVG中，并对其应用模糊滤镜。当然，您需要确保HTML中的图像和SVG中的图像版本正确对齐。

例如，下面是SVG中带有模糊图像的示例的一个版本。但还没有多边形。

​

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}
body {
  background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg');
}

<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;">
   <defs>
      <filter id="blurry">
         <feGaussianBlur stdDeviation="5" in="SourceGraphic"></feGaussianBlur>
      </filter>
   </defs>

   <image x="0" y="0"
          width="500" height="332"
          xlink:href="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg"
          filter="url(#blurry)" />
</svg>

​

现在，如果我们想要模糊的图像在多边形内部，我们可以使用剪切路径来实现。

我们将多边形转换为剪切路径，并将其应用于模糊图像。

​

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}
body {
  background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg');
}

<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;">
   <defs>
      <filter id="blurry">
         <feGaussianBlur stdDeviation="5" in="SourceGraphic"></feGaussianBlur>
      </filter>

      <clipPath id="polyclip">
          <polygon points="50,200, 300,50, 400,300" />
      </clipPath>
  </defs>

   <image x="0" y="0"
          width="500" height="332"
          xlink:href="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg"
          filter="url(#blurry)"
          clip-path="url(#polyclip)" />
</svg>

​

请注意，我在这里使用了一个稍微有趣的三角形多边形。从而使效果更加明显。

Answer 2

将此代码放入Polygon标记中：

<polygon points="200,0 0,160 500,330" style="fill:lime;stroke:purple;stroke-width:1"></polygon>

​

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}
body {
  background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg');
}

<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;opacity: 0.5;">
  <defs>
   <filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
      <feGaussianBlur stdDeviation="5" in="SourceGraphic" result="blurSquares"></feGaussianBlur>
      <feComponentTransfer in="blurSquares" result="opaqueBlur">
        <feFuncA type="linear" intercept="1"></feFuncA>
      </feComponentTransfer>
      <feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"></feBlend>
   </filter>
  </defs>
  <g filter="url(#blurry)">
    <polygon points="200,0 0,160, 500,330" style="fill:lime;stroke:purple;stroke-width:1"></polygon>
  </g>
</svg>

​

Answer 3

如果您删除feComponentTransfer和feBlend标记，您的代码将正常工作。

http://jsbin.com/tuyorotome/1/edit?html,css,output