css - 鼠标悬停在 SVG (Inkscape) 上

标签 css svg

我是 svg 的新手,并试图用 inkscape 复制一个简单的鼠标悬停效果,但我的 svg 没有做任何事情。

<svg xmlns="http://www.w3.org/2000/svg" width="74mm" height="105mm" viewBox="0 0 74 105">
<ellipse cx="37.042" 
cy="244.461" rx="30.994" ry="24.568"
onmouseover=fill:"red";
onmouseout=fill"none";
opacity=".75" fill="#1a1a1a" 
stroke="#000" stroke-width=".076" 
stroke-linejoin="round"
paint-order="stroke markers fill"
transform="translate(0 -192)"/>

任何人都可以告诉我必须在 inkscapeprogramm 的两个字段中放入什么才能使其工作吗?我搜索了几个小时,但没有找到匹配的解决方案。 我用 onmousein 和 fill:"red"和 fill:"none"onmouseout 试过了,但那也不起作用。

提前致谢

最佳答案

将鼠标悬停在您想更改椭圆样式的上方。与 onmouseout 一样,fill:none您需要为椭圆添加 pointer-events:all 才能与鼠标交互。

<svg xmlns="http://www.w3.org/2000/svg" width="74mm" height="105mm" viewBox="0 0 74 105">
<ellipse cx="37.042" 
cy="244.461" rx="30.994" ry="24.568"
onmouseover="this.style.fill='red'";
onmouseout="this.style.fill='none'";
opacity=".75" fill="#1a1a1a" 
stroke="#000" stroke-width=".076" 
stroke-linejoin="round"
paint-order="stroke markers fill"
pointer-events="all"
transform="translate(0 -192)"/>
</svg>

关于css - 鼠标悬停在 SVG (Inkscape) 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58994247/

相关文章:

html - 将 ul 定位在父 li 下

html - 将导航栏图标与 bootstrap 3 中的文本对齐?

html - d3.js : Getting gradients on a bar chart?

javascript - 如何在条形图的中间/中心对齐线条标记 - Highcharts

javascript - 添加元素时的 d3.js 坐标

css - 使用css围绕中心文本位置旋转svg文本

javascript - jQuery CSS 表情崩溃

css - float 段落宽度未定义

javascript - 在 JavaScript 中启用/禁用导航项的最佳方式?

css - SVG 图像在 IE9 的 CSS 背景中不起作用