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

如果直接向cursor: pointer元素添加“svg”不起作用，您可以尝试添加透明元素（直接在object标记上的伪元素不起作用）具有与SVG相同的尺寸，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" />

Answer 3

要在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了解详情。

Answer 4

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

1）将svg包装到<a>中以使其可点击：

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

2）从object元素中移除指针事件，以便点击次数直接传递到<a>：

object{
    pointer-events: none;
}

a{
    display: inline-block; /* or block if you need */
}

Answer 5

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

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

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

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

5 个答案: