如何将 SVG 过滤器应用于直线路径？ [复制]答案

【问题标题】：How to apply an SVG filter to a straight path? [duplicate]如何将 SVG 过滤器应用于直线路径？ [复制]
【发布时间】：2019-08-03 14:15:55
【问题描述】：

我想让路径变得模糊，这适用于除直路径之外的所有路径。但是，没有显示直线路径。

我发现问题SVG Line with Gradient Stroke Won't Display Straight 似乎很好地回答了这个问题。但是，我无法更改单位以显示直线。

    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

【解决方案1】：

您可以使用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>

【讨论】：