如何使用 onmouseover 功能突出显示 SVG 图像的一部分？答案

【问题标题】：How do I use the onmouseover function to highlight a portion of an SVG image?如何使用 onmouseover 功能突出显示 SVG 图像的一部分？
【发布时间】：2019-04-02 16:58:57
【问题描述】：

我有一张欧洲地图的 SVG 图像，每个国家的分区由路径表示。如果我将鼠标悬停在一个国家/地区上，我希望悬停在该国家/地区的不透明度更改为 0.5。我尝试定义一个要调用的 JavaScript 函数，但是当我将鼠标悬停在一个国家/地区时似乎什么都没有发生。这是我的 SVG 代码供参考，以及我尝试编写的 JavaScript：

<script
    xlink:href="../map.js"
    id="script99"
    type="text/javascript" />
 <g
    inkscape:groupmode="layer"
    id="layer2"
    class="section"
    inkscape:label="paths"
    transform="translate(0,-230.143)">
   <path
      style="fill:#3399ff;stroke:#000000;stroke-width:0.06832593px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
      d="m 170.10418,253.29039 0.16365,-1.29169 2.4003,-0.68196 2.91852,-0.51346 0.90921,0.17651 0.12727,0.61776 -0.50914,0.82636 -0.14547,1.3639 -1.51836,1.04298 -0.82736,0.85845 c 0,0 -0.28187,0.48137 -0.33642,0.48939 -0.0545,0.007 -0.99103,-0.7381 -0.99103,-0.7381 l -0.66371,-0.43325 -0.60915,-1.37191 z"
      id="ukraine" 
      onclick="Here(id)"
      onmouseover="MouseOver(this)"
      inkscape:connector-curvature="0"
      />

function MouseOver(elem){
    elem.opacity = 0.1;
}

【问题讨论】：

你试过css hover吗？
@MrJ，我该怎么做呢？我没有用于设置 svg 样式的外部 css 文件
@MrJ 不，我只将此代码包装在 svg 标签中。我想既然我可以通过这种方式实现 onclick，那么我也可以通过这种方式实现 onmouseover

标签： javascript css svg

【解决方案1】：

我已经删除了内联样式，并将它们放在了<style> 标记中。如您所见，<style> 标签位于 svg 元素内。

我添加了你的样式

#ukraine:hover {
      fill-opacity: 0.5;
    }

这是演示：

<svg viewBox="170 250 7 7">
  <style type="text/css">
        <![CDATA[
        #ukraine {
  fill: #3399ff;
  fill-opacity: 1;
  stroke: #000000;
  stroke-width: 0.06832593px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-opacity: 1;
}

#ukraine:hover {
  fill-opacity: 0.5;
}
        ]]> 
  </style>
  
   <path id="ukraine"
      d="m 170.10418,253.29039 0.16365,-1.29169 2.4003,-0.68196 2.91852,-0.51346 0.90921,0.17651 0.12727,0.61776 -0.50914,0.82636 -0.14547,1.3639 -1.51836,1.04298 -0.82736,0.85845 c 0,0 -0.28187,0.48137 -0.33642,0.48939 -0.0545,0.007 -0.99103,-0.7381 -0.99103,-0.7381 l -0.66371,-0.43325 -0.60915,-1.37191 z"
       
      /> 
</svg>

【讨论】：