游标：指针; on svg元素不工作 [英] Cursor: pointer; on svg element is not working

问题描述

在我的网站中，我使用svg元素。

In my website i use svg elements. Sometimes i need them to be clickable, therefore i want pointer cursor over them.

但是添加css类或样式

However adding css class or style

cursor: pointer;

无效。

元素

<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object>

它似乎只是不工作与svg。

It seems like it just not worki with svg. Anyone know how to fix, or how to go around it?

推荐答案

如AmeliaBR的评论所示，您应该在SVG < object> 。

As AmeliaBR's comment indicates, you should add this style inside the SVG <object>.

除非你的SVG很简单， ：只有当您将鼠标悬停在SVG中的某个形状上时才会看到指针，而在两个形状之间则不会。

And unless your SVG is very simple, you may have the same issue I had: only seeing a pointer when you are hovering over one of the shapes in the SVG, but not when you're between shapes.

（在某些情况下，您可能想要这种行为，但对于字标，例如，您通常希望整个矩形是可点击的，而不仅仅是单个字母）。

(In some cases you might want that behavior, but for a wordmark, for example, you typically want the whole rectangle to be clickable, not just the individual letters.)

要使整个矩形可点击，请添加 svg {cursor：pointer; } 。如果您只想让特定元素可点击，请按类别命名：

To make the whole rectangle clickable, add svg { cursor: pointer; }. If you just want specific elements clickable, name them by class:

<svg ...>
  <style>
    svg { cursor: pointer; } /* whole rectangle */

    /* OR */

    .element-name { cursor: pointer; } /* specific elements */
  </style>
  ...
</svg>

这篇关于游标：指针; on svg元素不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！