Question

我是svg的新手，并试图用inkscape复制一个简单的mouseovereffect，但是我的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并在onmouseout中填充：“红色”并填充：“无”，但是那也不起作用。

非常感谢

Answer 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>

将鼠标悬停在SVG上（Inkscape）

1 个答案: