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

Question

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

查看this example：

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

在这种情况下，白色区域覆盖的所有内容都应该模糊不清。它应该是这样的：

我找到this，但这里使用的是静态背景图片，我没有。 有没有为什么要使用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原语。< / p>

Answer 2

这只能在单个浏览器中使用内联SVG直接实现--Internet Explorer 10 - 您使用“enable-background”属性并使用内置的“BackgroundImage”源。这是您链接到的教程文本中显示的方法。

如果您的背景仅为图片，则有一种解决方法。您编写了一个过滤器，该过滤器使用feImage过滤器来提取背景中的相同图像，模糊它们，并在您想要在顶部显示的任何内容下合成模糊。这是您链接到的教程的实际代码中使用的方法。

如果您的背景是其他SVG内容（文本，路径等），则没有跨浏览器方式来实现您的效果，因为Firefox不支持SVG对象作为feImage过滤器原语的输入。如果您不关心Firefox，那么您可以使用该教程用于图像的相同解决方法。

以下是后者的示例 - 它非常接近您想要的，但我只在Chrome / Windows中测试过它（我知道它在Firefox中不起作用）

<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
  <defs>
    <filter id="blurry" x="-20%" y="-20%" height="140%" width="140%" primitiveUnits="userSpaceOnUse">
      <feImage x="0" y="0" width="500" height="500" xlink:href="#squares" result="mySquares"/>
      <feGaussianBlur stdDeviation="40" in="mySquares" result="blurSquares"/>
      <feComponentTransfer in="blurSquares" result="morealpha">
        <feFuncA type="linear" intercept=".8"/>
      </feComponentTransfer>
      <feComposite operator="in" in="morealpha" in2="SourceGraphic" result="clipBlur"/>
      <feFlood x="10%" y="10%" width="80%" height="80%" flood-color="white" flood-opacity="0.6" result="whitesquare"/>
      <feBlend mode="screen" in="clipBlur" in2="whitesquare"/>
    </filter>
  </defs>

  <g id="squares">
    <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 filter="url(#blurry)" x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" />
</svg>

（更新：>最近的发现 - 您可以使用javascript将您要提供给feImage的任何内容编码为svg + xml编码数据URI - 然后跨浏览器工作。超级难看。）< / p>