Html 如果应用过滤器，SVG将消失

我一直在网站上玩弄

SVG

s，我一直试图让

filter

s正常工作，但我似乎做不好

问题是，一旦我应用定义的

过滤器

，svg就会完全消失。我尝试将

过滤器

内联应用，只是想看看它是否有效，如下所示：

<symbol id="circle" viewBox="0 0 400 209.603" filter="url('#blur-filter')">
...
</symbol>

删除您的

style=“display:none”

并将

width:0

添加到第一个

svg

.svg圆圈：悬停{
过滤器：url（“模糊过滤器”）；
}
.svg灰色{
填充：#333；
}
svg：第一种类型{
宽度：0
}

---

移除

显示：无并为其指定0个维度。这应该可以做到。不知何故，筛选器可能继承了
显示：none


.svg圆圈：悬停{
过滤器：url（“模糊过滤器”）；
}
.svg灰色{
填充：#333；
}


html，正文{
保证金：0；
填充：0；
}
.svg圆圈：悬停{
过滤器：url（“模糊过滤器”）；
}
.svg灰色{
填充：#333；
}

这似乎是一个很好的思路，但是
显示：none
是有原因的。正如您在示例中看到的，svg标记占用了一些空间，这不是我想要的。我希望定义位于html的顶部，它们不应该占用任何空间。你知道如何绕过这个问题吗？@Pavlin，但默认情况下它们不会占用空间。@Qwertiy但如果你看他的第一个片段，它确实会占用空间。@Pavlin我更新了我的第一个片段，要删除空间，请look@Pavlin，因为您没有指定尺寸。看到我的答案了。我记得，如果它们都内联到相同的html中，并且ID是唯一的，或者如果您指定了其他svg的路径（不仅仅是一个锚）。您的示例确实有效，但它与我想要实现的相反。我希望svg定义位于顶部，这样我就可以在页面中多次重用它们。如果我像你那样做，我需要在整个页面中复制路径好几次。@Pavlin我的第一个假设是错误的。我更新了答案。一个没有解释的片段？那通常不是个好主意answer@dippas，请参阅。