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中图像模糊的示例版本。但还没有多边形。

＆＃13;

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');
}

＆＃13;

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

＆＃13;

现在，如果我们希望模糊图像在多边形内部，我们可以使用剪切路径。

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

＆＃13;

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');
}

＆＃13;

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

＆＃13;

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

Answer 2

将此代码放入您的多边形标记：

<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

SVG与多角形的背景迷离

3 个答案: