foreignObject Anzeige: keine in Firefox und Chrome

Question

Ich habe eine JavaScript-App, die mit Svg-Komponenten funktioniert. Ich habe svg Gruppen wie:

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

Und ich habe CSS wie folgt definiert (CSS auf svg Gruppen wirkt auf alle untergeordneten Elemente <g>

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

Das Problem ist, dass es nicht richtig funktioniert in. Firefox, während es in Chrome gut funktioniert. Warum und wie es zu beheben?

Die Knotenelemente sind in einer baumartigen Struktur, x Werte unterscheiden sich basierend auf Rang. In Firefox funktioniert der Hover nicht ordnungsgemäß auf dem ersten Paar von Knotenelementen. Aber funktioniert gut auf den Rest der Knoten-Elemente, unabhängig von x Werte.

UPDATE: Das Problem wurde tatsächlich von einer ForeignObject-Komponente verursacht, die ich die Elemente display:none gesetzt habe. Der Hover arbeitete tatsächlich an der versteckten Komponente als das gewünschte Element. Es wurde gelöst, indem die display: none auf das foreignObject gesetzt wurde.

Aber ich würde gerne wissen, warum dies in den beiden Browsern, Chrome und Firefox, anders funktioniert?

Answer 1

Sie müssen wahrscheinlich alle Blick auf css pointer-events, dokumentiert here haben. Damit können Sie festlegen, welche »Region« Ihrer Grafik für Hover verwendet wird. Dies kann die AABB sein (Achse ausgerichtet Bounding Box, nichts oder die Form der Grafik).

Answer 2

Das Problem wurde tatsächlich von einer ForeignObject-Komponente verursacht, die ich die Elemente auf display:none festgelegt habe. Der Hover arbeitete tatsächlich an der versteckten Komponente als das gewünschte Element. Es wurde gelöst, indem die display:none auf das ForeignObject festgelegt wurde.