將模糊濾鏡應用於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圖像的某個區域

回答

相關問題