对 SVG 组的悬停效果

Question

我正在制作一张很大的地图，上面有很多不同的区域和文字，有点像国家。将鼠标悬停在该区域上时，我想添加鼠标悬停效果。该效果应添加阴影并更改其不透明度。当我悬停在该区域之外时，不透明度应该恢复到原来的状态并且阴影效果应该消失。我设法做到了这一点，但是当我向这个区域添加文本时，它把事情搞砸了。当我将鼠标悬停在区域内的文本上时，悬停效果会再次调用，而根本不应再次调用它。我制作了一个 fiddle 在我将鼠标悬停在文本上之前一直有效。我正在使用 D3.js 库进行编码。

 var groupAreas = "";

 groupAreas = d3.selectAll(".area-group");

 groupAreas.on("mouseover", fadeInArea)
   .on("mouseout", fadeOutArea)
   .on("click", zoomIn);

 var initialOpacity = 0;

 function fadeInArea() {
   //Get its initial opacity
   initialOpacity = d3.select(this).select("path").style("opacity");

   d3.select(this).transition(500).attr("filter", "url(#shadow-filter-1)").style("cursor", "pointer");
   d3.select(this).select("path").transition(500).style("opacity", 0.7);
 }

 function fadeOutArea() {
   d3.select(this).transition(500).attr("filter", null).style("cursor", "default");
   d3.select(this).select("path").transition(500).style("opacity", initialOpacity);

 }

https://jsfiddle.net/qx5u9uo4/6/

该区域的原始不透明度为 0.4。当我将鼠标悬停在该区域上时，它会更改为 0.7 并添加阴影效果。当我出去时，它应该回到 0.4。然而，如果我进入该区域并将鼠标悬停在文本上，OnMouseOver 将再次被调用，然后将 0.7 设置为原始不透明度，因此当我实际离开该区域时再也不会回到 0.4。

我认为问题可能出在我的 DOM svg 元素的顺序上？

  <g class="area-group">
    <path id="area-1" d="M502.2 581.4h-53.5v-61l167.4 70.4v34.6H502.2z" />
    <text transform="translate(542.4 614)"> FOO </text>
    <text transform="translate(459.4 571.2)"> BAR </text>
    <text transform="translate(521.1 592.9)"> / </text>
  </g>

Answer 1

听起来您只是想阻止 text 元素接收指针事件：

.area-group>text {
  pointer-events: none;
}

对 SVG 组的悬停效果

On hover effect on a SVG group

svg

onmouseover

onhover

d3.js