关于 SVG 组的悬停效果

Question

我正在制作一张相当大的地图，上面有很多不同的区域和文字，有点像国家。当悬停在该区域上时，我想添加鼠标悬停效果。该效果应添加阴影并更改其不透明度。当我将鼠标悬停在该区域之外时，不透明度应该恢复到原来的状态，并且阴影效果应该消失。我设法做到了，但是当我在这个区域添加文本时，事情就变得混乱了。当我将鼠标悬停在区域内的文本上时，悬停效果会再次被调用，而根本不应该再次调用它。我做了一个小提琴，直到我也将鼠标悬停在文本上。我正在使用 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;
}