鼠标悬停在 SVG (Inkscape)答案

【问题标题】：Mouse over SVG (Inkscape)鼠标悬停在 SVG (Inkscape)
【发布时间】：2019-11-22 12:23:26
【问题描述】：

我是 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 的 2 个字段中添加什么才能使其工作？我搜索了几个小时，但没有找到匹配的解决方案。我用 onmousein 和 fill:"red" 和 fill:"none" onmouseout 尝试过，但这也不起作用。

提前多谢

【问题讨论】：

这能回答你的问题吗？ Mouseover on SVG circles
共享代码示例中的双引号不一致：onmouseover=fill:"red"; 应为：onmouseover="fill:'red';"
谢谢。我将尝试检查我的 inkscapefile 中出了什么问题。

标签： css svg

【解决方案1】：

鼠标悬停你想改变椭圆的样式。同样作为 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>

【讨论】：

感谢您的快速回答。使用您的代码它可以工作，但我的它什么也不做。无论如何，它向我证明了那些 onmouseover effekt 是可以实现的，我将尝试找出我的inkscape文件中出了什么问题。谢谢