SVGぼんやりしたエッジのぼかし

Question

こんにちは、私はSVGポリゴン要素にぼかしを作成しようとしています。fegaussianblurこれは私がこれまで得てきたものです。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 379 313.9" style="width:150px; height: auto;position: absolute; top: -100px;" xml:space="preserve" > 
    <defs> 
    <filter id="blur" x="0" y="0"> 
     <feGaussianBlur stdDeviation="10" /> 
    </filter> 
    </defs> 
    <polygon points="379,100 379,313.9 0,313.9 0,0" /> 
    <style> 
    fill: #f8f8f8; 
    fill-opacity: 0.75; 
    filter: url(#blur); 
    stroke: none; 
    </style> 
</svg> 

ぼかしをポリゴンに適用すると、鮮明なエッジが失われます。

私はそれがより見えるようにしたい本当に好き：

SVGのけれども、このことは可能ですし、そうでない場合は、私は試すことができます別のパスがあり、それはのように見える終わる何です下がる？

ありがとうございます！

Answer 1

ここ画像要素に適用されるクリップパスおよびぼかしフィルタの例です。

<svg viewBox="0 0 379 314" width="379" height="314" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <filter id="blur" x="0" y="0"> 
 
     <feGaussianBlur stdDeviation="10" /> 
 
    </filter> 
 
    <clipPath id="c"> 
 
     <polygon points="379,100 379,314 0,314 0,0" /> 
 
    </clipPath> 
 
    </defs> 
 
    <image xlink:href="http://i.stack.imgur.com/E6Wyo.jpg" 
 
     width="479" height="359" x="-50" y="-20" 
 
     filter="url(#blur)" clip-path="url(#c)"/> 
 
</svg>

Answer 2

あなたがぼやけたエッジを除去するためにクリップ経路を使用することができます。

<svg version="1.1"> 
    <filter id="blur" x="0" y="0"> 
    <feGaussianBlur stdDeviation="10" /> 
    </filter> 
    <clipPath id="mask"> 
    <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/> 
    </clipPath> 
    <image clip-path="url(#mask)" filter="url(#blur)" height="100" width="100" xlink:href="img.jpg" /> 
</svg>