Как применить фильтр SVG к прямому пути?

Я хочу сделать пути размытыми, это работает для всех путей, кроме прямых. Однако прямые пути не показаны.

Я нашел вопрос Линия SVG с градиентной обводкой не будет отображаться прямо который, кажется, очень хорошо отвечает на вопрос. Однако мне не удалось изменить единицы измерения таким образом, чтобы отображались прямые линии.

    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>


svg svg-filters
person ee2Dev    schedule 03.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать filterUnits="userSpaceOnUse". В качестве альтернативы вы можете сгруппировать все свои пути в элементе <g> и применить фильтр к группе.

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>

person enxaneta    schedule 03.08.2019