我的文字很大,想将字母悬停在时触发颜色更改。这意味着白色背景不应该触发悬停效果,只有字母的黑色填充才可以触发它。

像这样将文本容器悬停时,会触发默认的悬停效果:

* {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/

10-11 23:14
查看更多