CODEWITHSUNDEEP
svg
9er
9er

Reputation: 1734

SVG Blur with crisp edges

Hello I am trying to create a blur on a SVG polygon element using a fegaussianblur Here is what I've got thusfar

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

When I apply the blur to the polygon I lose the crisp edges! This is what it ends up looking like: enter image description here

I'd really like it to look more like:

enter image description here

Is this possible though SVG's and if not is there another path I can try to go down?

Thanks!

Upvotes: 2

Views: 1787

Answers (2)

ctron
ctron

Reputation: 694

You can use a clipPath to remove the blurred edges:

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

Upvotes: 1

r3mainer
r3mainer

Reputation: 24587

Here's an example of a clip path and blur filter applied to an image element.

<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="https://i.sstatic.net/E6Wyo.jpg"
         width="479" height="359" x="-50" y="-20"
         filter="url(#blur)" clip-path="url(#c)"/>
</svg>

Upvotes: 3

Related Questions