将辉光效果过滤器应用于具有透明路径子SVG的定位标记

Question

我想通过使用SVG创建点击点来创建一个图像映射。有人要求我在悬停时为锚点添加光晕，我目前正在通过在悬停时使用CSS为锚点标记应用过滤器来实现这一点。但是，只有当锚点的子路径具有实心填充颜色时，辉光才起作用，如本CodePen中所示。使用的SVG如下：

<svg version="1.1"
viewBox="0 0 3686 2074"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="white-glow"
x="-5000%"
y="-5000%"
width="10000%"
height="10000%">
<feFlood result="flood"
flood-color="#00bbdc"
flood-opacity="1"></feFlood>
<feComposite in="flood"
result="mask"
in2="SourceGraphic"
operator="in"></feComposite>
<feMorphology in="mask"
result="dilated"
operator="dilate"
radius="10"></feMorphology>
<feGaussianBlur in="dilated"
result="blurred"
stdDeviation="5"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<style>
a {
text-decoration: none;
}
path:hover {
filter: url(#white-glow);
}
a:hover {
filter: url(#white-glow);
text-decoration: none;
fill: #00BBDC;
font-weight: bold;
}
a:hover text {
filter: invert(62%) sepia(97%) saturate(3198%) hue-rotate(150deg) brightness(98%) contrast(101%);
font-weight: bold;
}
</style>
</defs>
<g>
<a href="google.com"
target="_top">
<path d="m473.3 564.3-0.6911 207 412.4 78.63-0.4043-180.9z"
style="fill:white;stroke-opacity:0;"
cursor="pointer"
pointer-events="all" />
<text transform="rotate(10.2 222.2 851.7)"
style="fill:#808080;font-family:'sans-serif';font-size:40px;line-height:1.25;shape-inside:url(#rect898);white-space:pre"
xml:space="preserve">
<tspan x="304.74805"
y="648.91602">
<tspan>Ask the experts</tspan>
</tspan>
</text>
</a>
</g>
</svg>

然而，我希望在悬停时实现相同的辉光效果，同时给路径一个填充值"0"；透明"；。

你能不能给我一些指导，告诉我如何继续，以实现与之前参考的相同的最终结果，同时保持锚标签内路径的填充值为"0"；透明"；？我已经阅读了以下Smashing杂志的文章，作者在文章中谈到了绘画和可见SVG元素之间的区别。此外，根据如何在透明矩形svg上有阴影的答案，

如果原始形状是完全透明的，则无法执行此操作-原因是-但您可以从几乎完全透明的原始形状开始执行此操作，最终生成一个被正常阴影包围的完全透明形状。

我使用了提供的解决方案，并发布了一个Codepen演示；文本"；锚点标记中的child在悬停时被隐藏，尽管它仍然存在于SVG中。事实上，过滤器正在模糊文本。你能告诉我还有别的路吗？

感谢您在这方面的专业知识。

Answer 1

如果您想保留原始图形的内容，则需要在过滤器中添加另一行，将原始内容粘贴在光晕上。

.container {
position: relative;
max-width: 100%;
width: 100%;
height: auto;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
background:orange;
}

<div class="container">
<svg version="1.1"
viewBox="0 0 3686 2074"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="white-glow"
x="-5000%"
y="-5000%"
width="10000%"
height="10000%">
<feFlood result="flood"
flood-color="#00bbdc"
flood-opacity="1"></feFlood>
<feComposite in="flood"
result="mask"
in2="SourceGraphic"
operator="in"></feComposite>
<feMorphology in="mask"
result="dilated"
operator="dilate"
radius="10"></feMorphology>
<feGaussianBlur in="dilated"
result="blurred"
stdDeviation="5"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>

<filter id="trans-shadow">
<feColorMatrix type="matrix" values="1 0 0 0 0 
0 1 0 0 0 
0 0 1 0 0 
0 0 0 100 0"
result="boostedInput"/>

<feGaussianBlur stdDeviation="5"/>
<feComposite operator="out" in2="boostedInput"/>
<feComposite operation="over" in2="SourceGraphic"/>
</filter>
</defs>
<style>
a {
text-decoration: none;

}

a:hover {
filter: url(#trans-shadow);
text-decoration: none;
fill: #00BBDC;
font-weight: bold;
}
a:hover text {
filter: invert(62%) sepia(97%) saturate(3198%) hue-rotate(150deg) brightness(98%) contrast(101%);
font-weight: bold;
}
</style>
<g>
<a href="google.com"
target="_top" pointer-events="all" >
<path d="m473.3 564.3-0.6911 207 412.4 78.63-0.4043-180.9z"
style="fill:white;fill-opacity="0.01"stroke-opacity:0;" visibility="visible"
/>
<text transform="rotate(10.2 222.2 851.7)"
style="fill:#808080;font-family:'sans-serif';font-size:40px;line-height:1.25;shape-inside:url(#rect898);white-space:pre"
xml:space="preserve">
<tspan x="304.74805"
y="648.91602">
<tspan>Ask the experts</tspan>
</tspan>
</text>
</a>
</g>
</svg>
</div>