Размытие 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, и если нет, есть ли другой путь, по которому я могу пойти?

_{Свободный перевод вопроса SVG Blur with crisp edges от участника @9er.}

Answer 1

Вот пример с clip path и фильтром размытия, примененного к элементу изображения.

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

_{Свободный перевод ответа от участника @r3mainer.}

БЛОГ НА HUSL

Размытие SVG с четкими краями фигуры

Ответы (1 шт):