悬停时更改 SVG 图像颜色答案

【问题标题】：Change SVG image color on hover悬停时更改 SVG 图像颜色
【发布时间】：2018-05-15 22:33:34
【问题描述】：

我要直奔“问题”。我有一张代表葡萄牙的 SVG 地图。所以我想要的是：当我将鼠标悬停在一个地区（例如里斯本）上时，它会改变颜色。现在所有的区域都是灰色的，我希望它们只有在我将鼠标悬停在它们上方时才显示为橙色。

我考虑过连接/调用一个 css 文件来为每个区域运行 a:hover{color: orange;} 代码。但是，它没有用。为什么我不能在 <path> 中使用 <style>？

现在我的“Portugal.svg”上有这段代码：

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

   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   baseprofile="tiny"
   height="435.27365"
   version="1.2"
   viewbox="0 0 1000 597"
   width="431.70035"
   id="svg25"
   sodipodi:docname="Portugal.svg"
   style="fill:#7c7c7c;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
   inkscape:version="0.92.1 r15371"
   xmlns:style="http://www.w3.org/TR/SVG/mystyle.css">

  <a xlink:href="http://www.artiroots.pt/devel-230b433e/wordpress/?s=Setubal">
        <title>Setúbal</title>
        <g>
        <path

            d="259......."
            id="P....."
            name="Setúbal"
            fill="#7c7c7c"
            inkscape:connector-curvature="0" 
            style="stroke-width: 0.100"
        />
        </g>
  </a>
</svg>
</html>

感谢您的帮助，我真的很感激！

【问题讨论】：

“我对此有很多问题，我已经搜索了很多，但不知道该怎么做。” - 这不是在这里工作的好基础.首先，请阅读How to Ask。然后告诉我们您的研究结果（不，这不能是“无”），以及您尝试了哪些结果。

标签： html css svg

【解决方案1】：

SVG 和 HTML 没有太大区别，因此您可以以类似的方式对待它们。

我在您的标记上看到的第一件事是您在 SVG 代码中嵌入了 fill 属性，如果您只想使用 CSS 更改颜色，那么您将使用重要的！如果你使用 CSS 设置 svg 的样式会更好，然后你可以使用伪类“hover”来改变颜色。

path {
  fill: #ccc;
}

path:hover {
  
  fill: tomato;
}

<svg id="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000.45 494.44">
<title>map_svg</title>
<g id="test-circle" class="cls-2">
<path d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/>
</g></svg>

【讨论】：

所以我必须创建一个example.css文件。正确的？这样我就可以插入path{fill:#ccc;}.....。还是我应该直接将它插入到 svg 文件中？
这是推荐的方式，但如果你只需要它，你可以把它放在同一个页面上，用样式标签包围。