外部对象显示：Firefox和Chrome中没有

Question

I have a JavaScript app that works with svg components. I have svg groups as:

<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>

And I have defined CSS as follows(CSS on svg groups acts on all child elements of <g> .

.node-element {
    display: inline;
}
.node-element :active {
    opacity: 0.5;
}
.node-element:hover {
    opacity: 0.5;
}

The problem is that it does not work properly in Firefox, whereas it works fine in Chrome. Why and how to fix it?

The node elements are in a tree-like structure where x values differ based on rank. In Firefox, the hover does not properly work on the first couple of node-elements. But works fine on the rest of the node-elements, regardless of the x values .

UPDATE: The problem was actually caused by a foreignObject component, which I have set the elements to display:none . The hover was actually working on the hidden component than the desired element. It was solved by setting the display:none to the foreignObject.

But I would like to know why this was acting differently in the two browsers, Chrome and Firefox?

Answer 1

You probably need to have all look at css pointer-events , documented here . With that you can specify what »region« of your graphic is used for hovers. This can be the AABB (axis aligned Bounding box, nothing or the shape of the graphic).

Answer 2

The problem was actually caused by a foreignObject component, which I have set the elements to display:none . The hover was actually working on the hidden component than the desired element. It was solved by setting the display:none to the foreignObject.