光标:指针; 在svg元素上不起作用

Question

在我的网站中,我使用svg元素.有时我需要它们是可点击的,因此我希望指针光标在它们上面.

但是添加css类或样式

cursor: pointer;

不行.

这是示例元素

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

似乎它与svg无法合作.任何人都知道如何解决,或如何解决它？

Answer 1

正如AmeliaBR的评论所示,您应该在SVG中添加此样式<object>.

除非你的SVG非常简单,否则你可能会遇到同样的问题:当你将鼠标悬停在SVG中的一个形状上时只看到一个指针,而不是当你在形状之间时.

(在某些情况下,您可能需要这种行为,但对于字标,例如,您通常希望整个矩形可以单击,而不仅仅是单个字母.)

要使整个矩形可单击,请添加svg { cursor: pointer; }.如果您只想要特定元素可点击,请按类命名:

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

    /* OR */

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

Answer 2

我认为这是其中最简单的解决方案：

1. 将 svg 包装到<a>或其他任何会收到点击的东西中：

<a href="#">
    <object>
        <embed src="img.svg"></embed>
    </object>
</a>

2. 从中删除指针事件，<object>以便在包装元素上触发所有点击：

object {
    pointer-events: none;
}