悬停功能不能在svg路径上工作

Question

我试图在我的svg路径上获得一个:hover功能。简而言之，我希望我的路径在鼠标悬停时用红色填充。

my CSS has:

.node_hover {
/* fill-opacity: 1;
fill: crimson;
transition: 0.3s; */
fill-opacity: 0;
}
.node_hover:hover {
fill-opacity: 1;
fill: black;
transition: 0.3s;
}

我的SVG是

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3269 4220" cursor = "pointer" pointerEvents = "all">
<g className = "node_hover">
<path id="Imported Path .... />
</g>
</svg>

然而悬停时什么也没发生。我试着给className到我的路径本身，但这不起作用。。

如有任何帮助，不胜感激。

Answer 1

我认为这是一个错别字。className应该是class

.node_hover {
fill: black;
transition: 0.3s;
}
.node_hover:hover {
fill: red;
transition: 0.3s;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3269 4220" cursor = "pointer" pointerEvents = "all">
<g class = "node_hover">
<path d="M150 0 L75 200 L225 200 Z" />
</g>
</svg>