html - 光标 : pointer; on svg element is not working

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>