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值如何。

UPDATE：问题实际上是由一个foreignObject组件引起的，我将元素设置为display:none。悬停实际上是在处理隐藏的组件而不是所需的元素。它是通过将display：none设置为foreignObject来解决的。

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

Answer 1

你可能需要全部查看css pointer-events，记录here。通过它，您可以指定图形的“区域”用于悬停。这可以是AABB（轴对齐的边界框，没有任何东西或图形的形状）。

Answer 2

问题实际上是由foreignObject组件引起的，我将元素设置为display:none。悬停实际上是在处理隐藏的组件而不是所需的元素。它是通过将display:none设置为foreignObject来解决的。

foreignObject display：none在Firefox和Chrome中

2 个答案: