游标：指针；在 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。任何人都知道如何修复或如何绕过它？

原文由 Skotnik 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Zach 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

1. 从 <object> 中删除指针事件，因此所有点击都将在包装元素上触发：

 object {
    pointer-events: none;
}

原文由 godblessstrawberry 发布，翻译遵循 CC BY-SA 4.0 许可协议