SVG模糊濾鏡邊緣假象

當我將模糊濾鏡應用於svg圖像時，它會模糊邊緣，使其變得幾乎不透明（請參閱左側示例）。我想要的是在沒有這種工件的情況下模糊它（請參閱正確的示例）。我通過黑客解決了這個問題：只需複製相同的翻轉圖像並將它們放置在四面即可。SVG模糊濾鏡邊緣假象

有沒有更好的方法？

請注意，我不能僅在5-10％時使圖像變大;尺寸應與原始圖像相同。

這裏是我的SVG：

... 
<filter id="blur"> 
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur> 
</filter> 
... 
<g filter="url(#blur)"> 
    <image xlink:href="cathedral.jpg"></image> 
</g>

enter image description here

來源

2014-06-25 Plastic Rabbit

這是具有使用feComponentTransfer增加了邊緣的不透明度爲1.0清脆的邊境不錯的黑客，但它也需要你將過濾器剪裁爲過濾元素的大小（使用過濾元素中的過濾器大小屬性） - 如果您不這樣做，您會看到溢出的新不透明模糊&黑色背景溢出原始圖像。

<filter id="blur" x="0%" 
y="0%" width="100%" height="100%"> 
<feGaussianBlur in="SourceGraphic" stdDeviation="4"/> 
    <feComponentTransfer> 
     <feFuncA type="discrete" tableValues="1 1"/> 
    </feComponentTransfer> 
</filter> 
... 
<g filter="url(#blur)"> 
    <image xlink:href="cathedral.jpg"></image> 
</g>

如果你沒有一個正方形輸入（假設你的照片是圓形的），那麼你就需要使用feComposite「中」夾輸出到輸入的區域，而不是使用過濾器尺寸。但feComposites現在有點慢，不能用作CSS過濾器的一部分，所以上面的方法對於方形輸入是更可取的。

請注意，這不適用於具有可變透明度/ alpha通道的圖像 - 它會將所有內容都轉換爲100％不透明度。

來源

2014-06-25 23:03:55

它似乎沒有工作。看到這裏：http://jsbin.com/vugojiju/1/edit 我把相同的圖像回來說明問題 - 模糊圖像的透明邊緣。 –

在添加componentTransfer之前，必須先關閉feGaussianBlur標籤。在我的代碼中，我使用了一個自動關閉的在您的版本中，可以將組件轉換放在一組打開和關閉的feGaussian標記中。所以，它忽略了componentTransfer –

有一個錯字：在第一行中，x =「0％應該有一個結束雙引號，除此之外，真棒破解！ – montecruiseto

SVG模糊濾鏡邊緣假象

回答

相關問題