元素未显示并且：悬停在.svg上不起作用[重复]
Posted
技术标签:
【中文标题】元素未显示并且：悬停在.svg上不起作用[重复]【英文标题】：Elements not showing up and :hover not working on a .svg [duplicate] 【发布时间】：2018-12-20 20:31:46 【问题描述】：我试图让 svg 的某些路径在悬停时改变颜色，但我的代码似乎真的有问题。例如，当我尝试添加内联 .svg 圆圈时，它甚至不会出现，尽管文本会出现。悬停根本不起作用，我尝试了几种不同的方法。
这是我的 html：
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>User Map</title>
</head>
<body>
<div id="map">
<img style"width: 60%" src="world.svg" />
</div>
</body>
</html>
我的 CSS：
#map
background:#3B475C;
position: relative;
width: 75%;
top: 15%;
left: 12.5%;
display: block;
.dot:hover
fill: #000 !important;
还有一个指向我的 .svg 的链接，因为它很大：scratchpad.io/anxious-frogs-1845
下面是代码背后的一般逻辑： world.svg 是 div 中的图像。我不希望国家/地区改变颜色，只是我放在地图顶部的图钉（尽管即使我尝试将 :hover 应用于整个事情，也没有任何反应）。我正在尝试将“点”类应用于所有引脚，然后在 CSS 中，让所有点都具有悬停功能。我真的很困惑为什么整个代码部分都没有做任何事情，特别是因为当我尝试将它们放入其他测试程序时它们工作正常。如果有办法将引脚放在另一个覆盖的 SVG 中，我可以这样做，但我不确定如何（如果我添加第二个 svg 并将其链接到 HTML，它不会显示）而且仍然没有解释为什么当我将它们添加到 html 时，悬停不起作用并且圆圈等不显示。
我非常感谢任何帮助，我是 html 和 css 的新手（我之前只使用过 Java 和 Python）并且非常卡在这个问题上。
【问题讨论】：
带有类点的元素在哪里？另外，如果您想为 svg 设置样式，难道您不只是包含 svg (see this) 而不是包含 svg 的图像标签作为其来源吗？ Pete- 这是我的第一个 html 项目，所以老实说，我只是不知道这是工作的要求。我认为将 svg 分开会使主 html 文件更易于使用。 【参考方案1】：简短回答：您不能通过img 标签设置 SVG 样式。您需要将 SVG 代码内联。
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>User Map</title>
</head>
<body>
<div id="map">
<svg ...>
<!-- svg content -->
</svg>
</div>
</body>
</html>
说明：img 标签将 SVG 渲染为位图，因此 SVG 元素不在 DOM 中，无法通过 CSS 选择。
【讨论】：
啊，非常感谢！我知道这将是一些像这样的新手。我真的很感激！以上是关于元素未显示并且：悬停在.svg上不起作用[重复]的主要内容，如果未能解决你的问题，请参考以下文章
SVG onmouseover / hover 不起作用[重复]