将模糊滤镜应用于svg图像的特定区域

Question

我有一个非常复杂,动态创建的svg图像,它是使用jQuery SVG创建的.我想创建一个"弹出"区域,该区域显示在画布中的所有svg元素之上.为了创建一个现代的半透明iOS7外观,我想将一个模糊过滤器应用于弹出区域下方的所有内容.我希望能够动态设置此弹出区域的x,y以及width和height属性.

看看这个例子:

<svg width="500" height="500">
    <rect x="10" y="10" height="235" width="235" fill="red" />
    <rect x="255" y="10" height="235" width="235" fill="green" />
    <rect x="10" y="255" height="235" width="235" fill="blue" />
    <rect x="255" y="255" height="235" width="235" fill="yellow" />

    <rect x="50" y="50" height="400" width="400" fill="rgba(255,255,255,0.8)" />
</svg>

在这种情况下,白色区域覆盖的所有内容都应该模糊.它应该是这样的:

我发现了这个,但这里使用的是静态背景图像,我没有.有没有为什么要使用svg,css和jQuery来实现这个效果？

Answer 1

这种方法怎么样？它使用起来有点困难,但它似乎适用于所有浏览器.

http://jsfiddle.net/J3X4p/2/

<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
  <defs>
    <filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
      <feGaussianBlur x="50" y="50" width="400" height="400" stdDeviation="40" in="SourceGraphic" result="blurSquares"/>
      <feComponentTransfer in="blurSquares" result="opaqueBlur">
        <feFuncA type="linear" intercept="1"/>
      </feComponentTransfer>
      <feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"/>
    </filter>
  </defs>

  <g id="squares" filter="url(#blurry)">
    <rect x="10" y="10" height="235" width="235" fill="red" />
    <rect x="255" y="10" height="235" width="235" fill="green" />
    <rect x="10" y="255" height="235" width="235" fill="blue" />
    <rect x="255" y="255" height="235" width="235" fill="yellow" />
  </g>

    <rect x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" fill-opacity="0.8" />
</svg>

它更棘手,因为过滤器应用于背景而不是<rect>.对于它的工作,您必须将复制x,y,width和height来自<rect>于feGaussianBlur原始.