不能过滤 SVG <line> 元素吗？

Question

我在此页面上的 SVG 中有一些元素：digitalbrent.com/cv。我所说的线条是像素人图像旁边的线条。我想为这些线条添加一种效果，让它们看起来像线条旁边的绿色字母一样有一种发光或雾霾。我认为最好的方法可能是在线条上添加一个微妙的高斯模糊 SVG 过滤器。我尝试使用以下方法申请the filter from this guy's similar question：

<line x1="225" y1="20" x2="225" y2="30" stroke-width="2" stroke="#00fc49" filter="url(#glowing);"></line>

<line x1="225" y1="20" x2="225" y2="30" stroke-width="2" stroke="url(#glowing);"></line>

^ 这些方法都不能用于实现过滤器。这是线条和 SVG 元素的完整代码（抱歉缩进。它没有从我的 ide 中正确复制。）：

<svg id="line-underlay" width="450" height="300" viewBox="0 0 450 300">
<defs xmlns="http://www.w3.org/2000/svg">
<filter id="glowing" height="100%" filterUnits="userSpaceOnUse">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="coloredBlur"/>
<feOffset dx="2" dy="2" result="offsetblur" />
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>

<line x1="225" y1="20" x2="225" y2="30" stroke-width="2" stroke="#00fc49" filter="url(#glowing);"></line>
<line x1="150" y1="30" x2="300" y2="30" stroke-width="2" stroke="#00fc49"></line>
<line x1="150" y1="30" x2="150" y2="40" stroke-width="2" stroke="#00fc49"></line>
<line x1="300" y1="30" x2="300" y2="40" stroke-width="2" stroke="#00fc49"></line>
<line x1="320" y1="75" x2="350" y2="75" stroke-width="2" stroke="#00fc49"></line>
<line x1="320" y1="75" x2="320" y2="112" stroke-width="2" stroke="#00fc49"></line>
<line x1="284" y1="112" x2="320" y2="112" stroke-width="2" stroke="#00fc49"></line>
<line x1="97" y1="106" x2="160" y2="106" stroke-width="2" stroke="#00fc49"></line>
<line x1="295" y1="136" x2="330" y2="136" stroke-width="2" stroke="#00fc49"></line>
<line x1="300" y1="185" x2="320" y2="185" stroke-width="2" stroke="#00fc49"></line>
<line x1="320" y1="185" x2="320" y2="202" stroke-width="2" stroke="#00fc49"></line>
<line x1="320" y1="202" x2="330" y2="202" stroke-width="2" stroke="#00fc49"></line>
<line x1="65" y1="206" x2="65" y2="220" stroke-width="2" stroke="#00fc49"></line>
<line x1="65" y1="220" x2="140" y2="220" stroke-width="2" stroke="#00fc49"></line>
<line x1="300" y1="242" x2="320" y2="242" stroke-width="2" stroke="#00fc49"></line>
<line x1="320" y1="242" x2="320" y2="260" stroke-width="2" stroke="#00fc49"></line>

</svg>

我搜索了几个不同的来源，包括 this question，这很相似，但在尝试了那里的解决方案后，它似乎仍然不起作用。我还尝试使用 css 将 box-shadow 应用于线条元素，但这也不起作用。我在搜索中完全没有发现任何东西表明您可以对<line> 应用过滤器，现在我想起来了，我从未见过有人在他们的代码中真正做到这一点。我开始怀疑这是否可能？如果是，我做错了什么？这样做的正确方法是什么？

如果您有任何替代方法来实现我正在寻找的模糊效果，请告诉我。我将不胜感激。

Answer 1

你有两个问题

• ; url末尾的filter属性无效
• 过滤器与形状位于不同的位置，因此您看不到它。我已经调整了过滤器的大小并移动了下面的过滤器

<svg width="450" height="300" viewBox="200 15 50 20">
<defs>
<filter id="glowing" x="210" y="10" height="30" width="25" filterUnits="userSpaceOnUse">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="coloredBlur"/>
<feOffset dx="2" dy="2" result="offsetblur" />
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>

<line x1="225" y1="20" x2="225" y2="30" stroke-width="2" stroke="#00fc49" filter="url(#glowing)"></line>


</svg>