外部對象顯示：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可以解決此問題。