SVG葡萄牙地图区域hover变色问题及样式疑问求助

我来帮你搞定这两个问题！先从悬停不生效的问题说起，再解释为什么<path>里不能放<style>标签。

一、修复鼠标悬停区域变色的问题 #

你当前的代码有几个小细节错误导致hover效果没生效，一步步来修正：

1. 修正样式表引用的属性错误
   你写的<?xml-stylesheet idhref="mystyle.css" type="text/css"?>里，idhref是错误的属性名，正确的应该是href，改成：

<?xml-stylesheet href="mystyle.css" type="text/css"?>

2. 调整CSS选择器和属性

• 首先，SVG图形的填充颜色是用fill属性，不是color（color是控制文本颜色的）；
• 其次，你的<path>标签里写了内联的fill="#7c7c7c"，内联样式的优先级比外部CSS高，会直接覆盖hover的样式。

解决方法二选一：

• 方法一：去掉<path>里的fill="#7c7c7c"，在外部CSS里统一设置默认样式和hover样式：

  /* 默认所有区域为灰色 */
  path {
    fill: #7c7c7c;
  }
  /* 鼠标悬停时区域变橙色 */
  a:hover path {
    fill: orange;
  }
  

• 方法二：保留内联的fill，用!important强制覆盖优先级：

  a:hover path {
    fill: orange !important;
  }
  

3. 清理无效的嵌套标签
   SVG文件不需要外面套<html>标签，这会干扰SVG的正常解析，把<html>和</html>删掉就好。

二、为什么不能在<path>标签内使用<style>标签？ #

这是因为SVG有严格的元素结构规范：

• <path>属于图形元素，只能包含<title>、<desc>这类描述性子元素，不能放<style>这种文档级别的元素；
• <style>标签必须放在SVG的根元素<svg>下面，或者如果是把SVG嵌入HTML页面的话，放在HTML的<head>里。

简单说就是这种嵌套不符合SVG的语法规则，浏览器会直接忽略掉<path>里的<style>标签，完全起不到作用。

修正后的完整SVG示例 #

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<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="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="stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" inkscape:version="0.92.1 r15371">
  <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" inkscape:connector-curvature="0" style="stroke-width: 0.100" />
    </g>
  </a>
</svg>

内容的提问来源于stack exchange，提问作者André Figas