如何解决SVG投影但在a：hover上
我想知道是否可以在我的SVG元素上添加一个阴影，但是只有当它处于a：hover时才会出现。 （我将过滤器标签用于SVG，这是我正在寻找的效果）。我读到不可能有inline：hover，所以我想知道是否还有另一种方法可以做到这一点。如果是这样，我将如何在#sun上实现它？
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Unica+One&display=swap" rel="stylesheet">
</head>
<style>
svg {
border: 3px solid red;
}
text {
font-family: 'Unica One',cursive;
font-size:25px;
}
a#sun {
fill: #D8A089;
}
a:hover#sun {
fill:#FBA618;
}
a:hover#seagull {
opacity: .8;
}
</style>
<body>
<svg width="185" height="200">
<defs>
<filter id="poly" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="15" dy="15" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<a id="sun" href="https://en.wikipedia.org/wiki/Sun" target="_blank"> <!-- where I want the drop shadow to go -->
<path d="M145,122 a65,65 0 1,0 -115,0" filter="url(#poly)"></path>
</a>
<a id="seagull" href="https://en.wikipedia.org/wiki/Gull" target="_blank"> <!-- polygon seagull -->
<polygon points="0,0 8,16 40,22" style="fill:#494949" />
<polygon points="8,22 80,41 45,42 " style="fill:#E3E4DF" />
<polygon points="80,42 60,65" style="fill:#EFEFEF" />
<polygon points="80,41 60,65 70,90 100,70" style="fill:#EBEAE5" />
<polygon points="80,75 45,95 50,105 110,105" style="fill:#E3E4DF" />
<polygon points="45,95 10,100 50,105" style="fill:#535257" />
<polygon points="80,75 110,105 120,90" style="fill:#EAE9E4" />
<polygon points="120,90 80,55 130,60 " style="fill:#EFEFEF" />
<polygon points="110,60 132,50" style="fill:#EBEAE5" />
<polygon points="132,50 130,60 155,48" style="fill:#E4E5E0" />
<polygon points="155,48 165,35 140,49.5" style="fill:#505052" />
<polygon points="120,90 123,80 136,86 135,89 " style="fill:#3F3F3F" />
<polygon points="136,89 141,88 " style="fill:#C55F48" />
</a>
<g fill="none" stroke="black" stroke-width="2">
<path stroke-dasharray="20,10,5,10" stroke-linecap="round" d="M5 125 l170 0" />
<path stroke-dasharray="20,10" stroke-linecap="round" d="M25 135 l140 0" />
<path stroke-dasharray="20,10" stroke-linecap="round" d="M50 145 l90 0" />
</g>
<text x="85" y="170" style="fill:black;">R
<tspan x="85" y="190">C</tspan>
</text>
</svg>
</svg>
</body>
</html>解决方法
只需在悬停时应用过滤器...
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Unica+One&display=swap" rel="stylesheet">
</head>
<style>
svg {
border: 3px solid red;
}
text {
font-family: 'Unica One',cursive;
font-size:25px;
}
a#sun {
fill: #D8A089;
}
a:hover#sun {
fill:#FBA618;
filter: url(#poly);
}
a:hover#seagull {
opacity: .8;
}
</style>
<body>
<svg width="185" height="200">
<defs>
<filter id="poly" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="15" dy="15" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<a id="sun" href="https://en.wikipedia.org/wiki/Sun" target="_blank"> <!-- where I want the drop shadow to go -->
<path d="M145,122 a65,65 0 1,0 -115,0"></path>
</a>
<a id="seagull" href="https://en.wikipedia.org/wiki/Gull" target="_blank"> <!-- polygon seagull -->
<polygon points="0,0 8,16 40,22" style="fill:#494949" />
<polygon points="8,22 80,41 45,42 " style="fill:#E3E4DF" />
<polygon points="80,42 60,65" style="fill:#EFEFEF" />
<polygon points="80,41 60,65 70,90 100,70" style="fill:#EBEAE5" />
<polygon points="80,75 45,95 50,105 110,105" style="fill:#E3E4DF" />
<polygon points="45,95 10,100 50,105" style="fill:#535257" />
<polygon points="80,75 110,105 120,90" style="fill:#EAE9E4" />
<polygon points="120,90 80,55 130,60 " style="fill:#EFEFEF" />
<polygon points="110,60 132,50" style="fill:#EBEAE5" />
<polygon points="132,50 130,60 155,48" style="fill:#E4E5E0" />
<polygon points="155,48 165,35 140,49.5" style="fill:#505052" />
<polygon points="120,90 123,80 136,86 135,89 " style="fill:#3F3F3F" />
<polygon points="136,89 141,88 " style="fill:#C55F48" />
</a>
<g fill="none" stroke="black" stroke-width="2">
<path stroke-dasharray="20,10,5,10" stroke-linecap="round" d="M5 125 l170 0" />
<path stroke-dasharray="20,10" stroke-linecap="round" d="M25 135 l140 0" />
<path stroke-dasharray="20,10" stroke-linecap="round" d="M50 145 l90 0" />
</g>
<text x="85" y="170" style="fill:black;">R
<tspan x="85" y="190">C</tspan>
</text>
</svg>
</svg>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
