Question

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

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

现在我的“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>

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

Answer 1

SVG和HTML不是那么不同，所以你可以用类似的方式对待它们。

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

＆＃13;

path {
  fill: #ccc;
}

path:hover {
  
  fill: tomato;
}

＆＃13;

<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>

＆＃13;

在悬停时更改SVG图像颜色

1 个答案: