我的文字很大,想将字母悬停在时触发颜色更改。这意味着白色背景不应该触发悬停效果,只有字母的黑色填充才可以触发它。
像这样将文本容器悬停时,会触发默认的悬停效果:
* {margin: 0;padding: 0;}
p {
font-size: 75vw;
line-height: 100vh;
text-align: center;
}
p:hover {
color: darkorange;
}
<p>SO</p>
在svg中使用text元素的行为相同:
text:hover{
fill:darkorange;
}
<svg viewbox="0 0 100 100">
<text x="0" y="50" font-size="70">SO</text>
</svg>
仅当将字母(示例中的黑色部分)的填充物悬停并且不在包含框上时,才有办法触发悬停效果吗?
最佳答案
您可以使用Inkscape通过Path> Object到path或Path> Stroke到convert the text to a path。一旦文本实际上是路径,默认情况下,鼠标悬停将仅对路径的渲染部分起作用。
IE。您需要编辑文档本身,尽管它是considered for the upcoming SVG 2 specification,但它不是SVG当前直接支持的功能。
关于javascript - 悬停效果仅对字母起作用(对容器不起作用),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30259894/