我有一个使用 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 两种浏览器中表现不同?
最佳答案
您可能需要全部查看 css pointer-events
,已记录 here .有了它,您可以指定图形的哪个 »region« 用于悬停。这可以是 AABB(轴对齐边界框,没有任何内容或图形的形状)。
关于javascript - foreignObject 显示 :none in Firefox and Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40336924/