时间戳

首页 > 解决方案 > 鼠标悬停在 SVG (Inkscape)

css - 鼠标悬停在 SVG (Inkscape)

问题描述

我是 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 试过，但这也不起作用。

提前谢谢了

标签： csssvg

解决方案

onmouseover 你想改变椭圆的样式。此外，作为 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>

推荐阅读