我有一个使用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可以解决这个问题。