javascript - foreignObject 显示 :none in Firefox and 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值(value)观。

更新: 问题实际上是由一个 foreignObject 组件引起的，我已将其元素设置为 display:none .悬停实际上是在隐藏的组件上而不是在所需的元素上工作。通过将 display:none 设置为 foreignObject 解决了这个问题。

但我想知道为什么这在 Chrome 和 Firefox 两种浏览器中表现不同？

Answer 1

您可能需要全部查看 css pointer-events，已记录 here .有了它，您可以指定图形的哪个 »region« 用于悬停。这可以是 AABB(轴对齐边界框，没有任何内容或图形的形状)。