外部对象显示：Firefox和Chrome中没有

Question

我有一个可与SVG组件配合使用的JavaScript应用。 我有svg组：

<svg id="canvas" width="100%" height="100%" viewBox="0 0 1500 500">
    <g class="node-element" x="0" y="0" height="20" width="300" id="node-c87">
        <text class="node-element-text" x="12" y="15">person:object</text>    
        <image x="0" y="4" width="11" height="11" xlink:href="assets/images/object-icon.png"></image>
    </g>
    <g class="nested-group">
        <g class="node-element" x="50" y="100" height="20" width="300" id="node-c87">
            <text class="node-element-text" x="12" y="15">person:object</text>    
            <image x="0" y="4" width="11" height="11" xlink:href="assets/images/object-icon.png"></image>
        </g>
    </g>
</svg>

而且我对CSS的定义如下（svg组上的CSS作用于<g>所有子元素。

.node-element {
    display: inline;
}
.node-element :active {
    opacity: 0.5;
}
.node-element:hover {
    opacity: 0.5;
}

问题在于它在Firefox中无法正常运行，而在Chrome中则可以正常运行。 为什么以及如何解决？

节点元素采用树状结构，其中x值基于等级而不同。 在Firefox中，悬停无法在前几个节点元素上正常工作。 但是， 无论x值如何，在其余节点元素上都可以正常工作 。

更新：问题实际上是由foreignObject组件引起的，该组件已将元素设置为display:none 。 悬停实际上在隐藏的组件上工作，而不是所需的元素。 通过将display：none设置为foreignObject可以解决此问题。

但是我想知道为什么这两种浏览器（Chrome和Firefox）的行为不同？

Answer 1

您可能需要全部关注css pointer-events ， 在此处记录了 pointer-events 。 这样，您可以指定图形的哪个“区域”用于悬停。 可以是AABB（轴对齐的边界框，什么也不是图形的形状）。

Answer 2

该问题实际上是由foreignObject组件引起的，该组件已将元素设置为display:none 。 悬停实际上在隐藏的组件上工作，而不是所需的元素。 通过将display:none设置为foreignObject可以解决此问题。