将模糊滤镜应用于svg图像的某个区域

我有一个非常复杂的动态创建的svg图像，它使用jQuery SVG创建。我想创建一个“弹出”区域，显示在画布中所有svg元素的顶部。要创建一个现代半透明的iOS7外观，我想对弹出区域下面的所有内容应用模糊滤镜。我想能够动态设置这个弹出区域的x，y以及宽度和高度属性。将模糊滤镜应用于svg图像的某个区域

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

在这种情况下，由白色区域应该模糊覆盖了一切。它应该看起来像这样： Example

我发现this，但这里使用了一个静态背景图像，我没有。是否有任何为什么使用svg，css和jQuery来实现这种效果？

来源

2013-10-13 Dafen

如何关于这种方法？这有点难以使用，但它似乎适用于所有浏览器。

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>这是棘手。要使其工作，必须将<rect>中的x,y,width和height复制到feGaussianBlur原语。

来源

2013-10-14 06:51:17

嘿真棒！这工作得很好！非常感谢你，我的团队会对这个结果非常满意！ =） – Dafen

只是另一个问题：如果滤镜下面没有元素，它就变成黑色。有没有办法使用svg元素背后的背景？（CSS背景图像设置为HTML标记）如果不是，我会尝试在过滤器下显示html背景图像的副本，但在其他svg元素上方。 – Dafen

仅当浏览器支持enable-background和BackgroundImage时才支持。但是大多数人都没有，正如迈克尔已经指出的那样。如果他们这样做，你会用他的解决方案，而不是我的。 –

这只能在单个浏览器中直接使用内联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>

enter image description here

（更新：。最近发现 - 您可以使用JavaScript来要喂feImage成SVG + XML编码的数据URI的任何内容进行编码 - 然后，工程跨浏览器的超级难看）

来源

2013-10-13 19:15:14

感谢您的回答！我使用BigBadaboom方法，因为Firefox对我们非常重要。 =） – Dafen

将模糊滤镜应用于svg图像的某个区域

回答

相关问题