SVG onmouseover / hover 不起作用[重复]

Posted 2023-03-06

【中文标题】SVG onmouseover / hover 不起作用[重复]

【英文标题】：SVG onmouseover / hover doesn't work [duplicate]

【发布时间】：2017-09-04 11:23:37

【问题描述】：

我有一个带有一些矩形的 SVG 图像，当悬停在它上面时需要改变颜色。在 jsfiddle 中，代码运行良好：

https://jsfiddle.net/o8ufaL0h/

但在我的网页上，我无法将鼠标悬停或鼠标悬停在单个矩形上。但是，当我在 html 代码中对完整的 img 元素设置 onmouseover 时，它确实有效，所以我猜这不是 img 元素上的 z-index 问题。

我真的不知道为什么我不能在我的 svg 或 css 代码中定位 svg 元素。

<style>
    rect:hover
    
        opacity: 0.5;
    
</style>


<rect x="277" y="126" fill="#960B2C"  />
<rect x="120" y="126" fill="#004D44"  />

<rect x="277" y="232" fill="#960B2C"  />
<rect x="120" y="232" fill="#004D44"  />

<rect x="277" y="339" fill="#960B2C"  />
<rect x="120" y="339" fill="#004D44"  />

</svg>

【问题讨论】：

浏览器的开发者控制台是否有错误或警告？

这种东西只能用内联SVG，不能用<img src="image.svg" />让它响应。 img 是静态渲染的。

非常感谢 Not dark Absol，不知道你可以把它放在 html 中。它现在可以工作了:)

【参考方案1】：

尝试为每个矩形标签添加属性（使用 javascript）

onmouseover="this.setAttribute('fill-opacity','.5')" 
onmouseout="this.removeAttribute('fill-opacity')"

或者用css

<style>
rect:hover
    fill-opacity:1

</style>