Html 光标：指针；在 svg 元素上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26672936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cursor: pointer; on svg element is not working
提问by Skotnik
In my website i use svg elements. Sometimes i need them to be clickable, therefore i want pointer cursor over them.
在我的网站中，我使用 svg 元素。有时我需要它们是可点击的，因此我希望将指针光标放在它们上面。
However adding css class or style
但是添加 css 类或样式
cursor: pointer;
not work.
不行。
That's the example element
这是示例元素
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object>
It seems like it just not worki with svg. Anyone know how to fix, or how to go around it?
似乎它不适用于 svg。任何人都知道如何解决，或如何解决它？
采纳答案by Zach
As AmeliaBR's comment indicates, you should add this style inside the SVG <object>.
正如 AmeliaBR 的评论所示，您应该在 SVG 中添加此样式<object>。
And unless your SVG is very simple, you may have the same issue I had: only seeing a pointer when you are hovering over one of the shapes in the SVG, but not when you're between shapes.
除非您的 SVG 非常简单，否则您可能会遇到与我相同的问题：仅当您将鼠标悬停在 SVG 中的一个形状上时才能看到指针，而在形状之间时则不会。
(In some cases you might want that behavior, but for a wordmark, for example, you typically want the whole rectangle to be clickable, not just the individual letters.)
（在某些情况下，您可能需要这种行为，但例如，对于文字标记，您通常希望整个矩形都可点击，而不仅仅是单个字母。）
To make the whole rectangle clickable, add svg { cursor: pointer; }. If you just want specific elements clickable, name them by class:
要使整个矩形可点击，请添加svg { cursor: pointer; }. 如果您只想点击特定元素，请按类命名它们：
<svg ...>
<style>
svg { cursor: pointer; } /* whole rectangle */
/* OR */
.element-name { cursor: pointer; } /* specific elements */
</style>
...
</svg>
回答by Herr_Schwabullek
If adding "cursor: pointer" directly to the svgelement does not work, you can either try to add an transparent element (Pseudo elements directly on the objecttag do not work) with the same dimensions as the SVG which is absolutely positioned over the SVG.
如果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>Or you can take an imginstead of objectand add the "cursor: pointer"-style to the img:
或者您可以使用一个img代替object并将“ cursor: pointer”样式添加到 img：
<img id="male2" src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" alt="Description" />
<img id="male2" src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" alt="Description" />
回答by godblessstrawberry
I think this is the easiest solution among the others:
我认为这是其中最简单的解决方案：
1) wrap svg into <a>to make it clickable:
1) 将 svg 包装成<a>可点击：
<a href="#">
<object>
<embed src="img.svg"></embed>
</object>
</a>
2) remove pointer events from objectelement so clicks will be delivered to the <a>directly:
2）从object元素中删除指针事件，以便点击将直接传递到<a>：
object{
pointer-events: none;
}
a{
display: inline-block; /* or block if you need */
}
回答by Havok
To style individual elements in your SVG you can either use Javascript or use CSS inside the image in the defs tag or reference an external stylesheet.
要为 SVG 中的单个元素设置样式，您可以使用 Javascript 或在 defs 标签中的图像内使用 CSS，或者引用外部样式表。
<svg ...>
<defs>
<style type="text/css"><![CDATA[
.myfigureclass {
cursor: pointer;
}
]]></style>
</defs>
Check this linkfor more information.
查看此链接以获取更多信息。
You can also use an external stylesheet for your SVG like this:
您还可以像这样为 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>
Check this linkfor more information.
查看此链接以获取更多信息。
回答by Garr Godfrey
One of the simplest solutions may be to use img tag instead of object tag
最简单的解决方案之一可能是使用 img 标签而不是对象标签
<img src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" />
although, ideally you can embed the svg in the html. That doesn't let you cache the svg files, so I found using javascript to load the svg file as text and insert into the DOM allowed for caching and still got the SVG directly into the DOM so it could use all the css styles from your page.
不过，理想情况下，您可以将 svg 嵌入到 html 中。这不允许您缓存 svg 文件，所以我发现使用 javascript 将 svg 文件作为文本加载并插入到允许缓存的 DOM 中，并且仍然将 SVG 直接放入 DOM 中，因此它可以使用您的所有 css 样式页。
