SVG Blur с четкими краями

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

Вы можете использовать clipPath, чтобы удалить размытые края:

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