У меня есть приложение JavaScript, которое работает с компонентами svg. У меня есть SVG группы как:foreignObject display: нет в Firefox и Chrome
<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 следующим образом (CSS на SVG групп действует на все дочерние элементы <g>
.node-element {
display: inline;
}
.node-element :active {
opacity: 0.5;
}
.node-element:hover {
opacity: 0.5;
}
Проблема заключается в том, что он не работает должным образом в. Firefox, в то время как он отлично работает в Chrome. Почему и как его исправить?
Элементы узла находятся в древовидной структуре, где значения x различаются в зависимости от ранга. В Firefox наведение не работает должным образом при первом пара узлов. Но отлично работает на остальных элементах узла, независимо от значений x.
ОБНОВЛЕНИЕ: Проблема была вызвана компонентом foreignObject, который я установил для элементов display:none. Наведение фактически работало над скрытым компонентом, чем желаемый элемент. Это было решено установкой дисплея: none для объекта foreignObject.
Но я хотел бы знать, почему это действовало по-разному в двух браузерах Chrome и Firefox?
Вы пытались добавить окно просмотра в тег svg? –
Не могли бы вы предоставить демоверсию для воспроизведения проблемы? Он отлично работает для меня. – Ricky
@pritishvaidya Я добавил viewPort и ничего не изменил. – SachiDangalla