7

我有一个 SVG，其中有更多的 SVG，其中包含可变数量的矩形元素，它们都是从数据对象生成的。这是一般层次结构：

<svg class="parent-svg">
    <svg class="child-svg">
        <rect />
        <rect />
    </svg>
    <svg class="child-svg">
        <rect />
        <rect />
    </svg>
</svg>

我已将 mouseenter/mouseleave 事件绑定到.child-svg元素，但我发现当我的鼠标移动到<rect>元素之间的空白处时事件正在触发。我对 mouseenter/mouseleave 的理解是，当光标进入/离开子元素时它们不应该触发——这似乎是你期望 mouseover/mouseout 的行为。当然，我最理想的情况是 mouseenter/mouseleave 事件仅在我离开每个部分时触发（我已经使用颜色进行了描述）。

这是相关的小提琴：http: //jsfiddle.net/ysim/yVfuK/4/

编辑：我尝试给.child-svg元素一个高度和宽度，但这似乎也不起作用：http: //jsfiddle.net/ysim/gMXuU/3

编辑：这是解决方案的小提琴，根据@pornel的建议修复：http: //jsfiddle.net/ysim/HUHAQ/

谢谢！

4

1 回答 1

7

我的猜测是它.child-svg本身没有任何区域，因此无法直接将其悬停。当老鼠离开<rect>时，它.child-svg也会离开。

SVG 没有流式布局，因此子元素不会影响父元素的大小。

这是解决方案：http: //jsfiddle.net/gMXuU/4/

  • 添加一个<rect>没有填充的背景
  • 添加pointer-events:all以使不可见元素对鼠标指针“可见”
于 2013-06-21T22:50:20.870 回答