How to apply an SVG filter to a straight path?

Question

I want to make paths blur, this works for all paths but the straight ones. However, the straight paths are not shown.

I found the question SVG Line with Gradient Stroke Won't Display Straight which seems to answer the question very well. However, I have not been able to change the Units such that the straight lines are displayed.

    path {
      stroke: blue;
      stroke-width: 5px;
      fill: black;
    }

<!DOCTYPE html>

  <svg width="300" height="300">

    <filter id="blurMe">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>

    <path d= "M 100 100 L 200 100" filter="url(#blurMe)"/>
    <path d= "M 200 100 L 200 200" filter="url(#blurMe)"/>
    <path d= "M 200 200 L 100 200" filter="url(#blurMe)"/>
    <path d= "M 100 200 L 100 100" filter="url(#blurMe)"/>
    <path d= "M 100 100 L 200 200" filter="url(#blurMe)"/>
    <path d= "M 200 100 L 100 200" filter="url(#blurMe)"/>

  </svg>

score 1 · Accepted Answer · answered Aug 03 '19 at 14:25

You can use filterUnits="userSpaceOnUse". Alternatively you can group all your paths in a <g> element and apply the filter to the group.

path {
      stroke: blue;
      stroke-width: 5px;
      fill: black;
      filter:url(#blurMe);
    }

 <svg width="300" height="300">

    <filter id="blurMe" filterUnits="userSpaceOnUse">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>

    <path d= "M 100 100 L 200 100" />
    <path d= "M 200 100 L 200 200" />
    <path d= "M 200 200 L 100 200" />
    <path d= "M 100 200 L 100 100" />
    <path d= "M 100 100 L 200 200" />
    <path d= "M 200 100 L 100 200" />

  </svg>

How to apply an SVG filter to a straight path?

1 Answers1