光标：指针；在 svg 元素上不起作用

Posted 2023-03-06

【中文标题】光标：指针；在 svg 元素上不起作用

【英文标题】：Cursor: pointer; on svg element is not working

【发布时间】：2014-12-27 16:06:21

【问题描述】：

在我的网站中，我使用 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。任何人都知道如何修复或如何解决它？

【问题讨论】：

请演示问题。

我在你的 css 中没有看到 cursor:pointer;..？

您将光标：指针规则附加到什么？如果你只是把它放在你的 css 中，它是行不通的。

正如我所写的那样。我尝试使用光标：指针添加类'buttonMode'，然后将此类添加到该对象。我也尝试将此属性添加到 id (#male2cursor:pointer;);将此直接添加到样式中也不起作用。我发现了类似的问题***.com/questions/20563293/… 但它对我不起作用..

正如linked question 解释的那样，光标样式必须在嵌入的SVG中定义。如果您在 <object> 元素（使用 `id="male2"）上设置样式，它们将不会产生效果，因为（与图像不同）对象是交互式的。当光标在对象上时，它由 SVG 文档中的样式控制，而不是由主网页中的样式控制。

【参考方案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>

【参考方案2】：

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

将 svg 包装成 <a> 或其他任何会收到点击的内容：

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

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

object 
    pointer-events: none;

【讨论】：

@brgs 据我记得对我来说工作得很好，你有一个例子可以看看吗？

与问题相同的场景，只是 .myClass a object pointer-events:none; /*size margin display*/ 对我有用。

在<object> 标签上设置pointer-events: none 解决了我的问题

【参考方案3】：

如果将“cursor: pointer”直接添加到svg元素不起作用，您可以尝试添加一个透明元素（直接在object标签上的伪元素不起作用）与绝对定位在 SVG 之上的 SVG。

a.svg-cursor:before 
content: "";
display: block;
position: absolute;
background-color: transparent;
cursor: pointer;
/* plus width and height of the SVG */

<a href="#" class="svg-cursor">
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" es-character="male2"></object>
</a>

或者您可以使用img 而不是object 并将“cursor: pointer”样式添加到img：

<img id="male2" src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" alt="Description" />

【参考方案4】：

要为 SVG 中的单个元素设置样式，您可以使用 javascript 或在 defs 标记中的图像内使用 CSS 或引用外部样式表。

<svg ...>
  <defs>
    <style type="text/css"><![CDATA[
      .myfigureclass 
        cursor: pointer;
      
    ]]></style>
  </defs>

查看this link了解更多信息。

您也可以像这样为 SVG 使用外部样式表：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.svg.css" ?>

<svg
   xmlns="http://www.w3.org/2000/svg"
   ...>
(...)
</svg>

查看this link了解更多信息。

【参考方案5】：

最简单的解决方案之一可能是使用 img 标签而不是 object 标签

<img src="course/ani/male2.svg" style="left: 87px; bottom: 56px;"  />

不过，理想情况下，您可以将 svg 嵌入到 html 中。 这不允许您缓存 svg 文件，所以我发现使用 javascript 将 svg 文件作为文本加载并插入到允许缓存的 DOM 中，并且仍然将 SVG 直接放入 DOM 中，因此它可以使用您的所有 css 样式页面。