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将线条阴影应用到线元素，但这也没有用。我在搜索中找不到任何内容，表明您可以对<line>应用过滤器，现在我想到了，我从未见过任何人真正在其代码中执行此过滤器。我开始怀疑这是否可能？如果是的话，我做错了什么？这样做的正确方法是什么？

如果您有其他方法可以实现我想要的模糊效果，请告诉我们。我非常感激。

Answer 1

你有两个问题

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

＆＃13;

const Review = `
    type Review {
        HasErrors: Boolean
        extraStuff: String
    }
`

const RootQuery = `
    type RootQuery {
        review(id: String!): Review
    }
`;

const SchemaDefinition = `
    schema {
        query: RootQuery
    }
`;

＆＃13;

是否无法过滤SVG <line>元素？

1 个答案: