foreignObject display:none in Firefox and Chrome

foreignObject display:none in Firefox and Chrome

本文关键字：Firefox and Chrome in none display foreignObject      更新时间：2023-09-26

我有一个使用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值

UPDATE:这个问题实际上是由一个foreignObject组件引起的，我已经将元素设置为display:none。悬停实际上是在隐藏的组件上工作，而不是在期望的元素上。可以通过将display:none设置为foreignObject来解决。

但我想知道为什么这是不同的行为在两个浏览器，Chrome和Firefox?

您可能需要查看这里记录的css pointer-events。有了它，你可以指定图形的哪个"区域"用于悬停。这可以是AABB(轴对齐的边界框，无或图形的形状)。

这个问题实际上是由一个foreignObject组件引起的，我已经将元素设置为display:none。悬停实际上是在隐藏的组件上工作，而不是在期望的元素上。通过将display:none设置为foreignObject可以解决这个问题。

相关文章：