由于使用样式，svg 中的标记图像在 FireFox 中不可见。怎么修？

Question

在 Firefox 和 Chrome 中的显示有所不同。正如我调查的那样 Chrome 在显示图像时考虑了 css 而 Firefox 没有。

html

<svg viewBox="-80 0 500 500">
<g>
<g class="node" transform="translate(0,20)" style="opacity: 1;">
<text transform="translate(0,0)"><tspan class="message">Visible in Chrome and Firefox</tspan></text>
<image class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn3.iconfinder.com/data/icons/diagram_v2/PNG/32x32/diagram_v2-17.png" x="0" y="15" width ="20px" height="20px" ><title>Try to use in Firefox and Chrome.</title> 
</image>
</g>
<g class="node" transform="translate(0,80)" style="opacity: 1;">
<text transform="translate(0,0)"><tspan class="message">Invisible in Firefox</tspan></text>
<image class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn3.iconfinder.com/data/icons/diagram_v2/PNG/32x32/diagram_v2-17.png" x="0" y="15" ><title>Try to use in Firefox and Chrome.</title> 
</image>
</g>
</g>
</svg>

css

.icon {
  display: block;
  margin: 0 auto;
  width: 20px;
  height: 20px;
}
.message {
  text-align: left;
  visibility: visible;
  font: 8pt sans-serif;
}

这是jsfiddle。如何让 Firefox 使用 css?

PS：我找到了相关的 question，但我在根元素中有 viewBox。

Answer 1

在 SVG 1.1（当前标准）中，只有 properties 可以使用 CSS 设置样式。

在即将推出的 SVG 2 标准中，几乎每个属性都可以使用 CSS 设置样式。然而，浏览器才刚刚开始实施这一变化。 Chrome 在实现这一点上比 Firefox 走得更远。

现在，您必须以不同的方式执行此操作。 IE。具有属性 width="20" height="20".

由于使用样式，svg 中的标记图像在 FireFox 中不可见。怎么修？

Tag image in svg invisible in FireFox because of using style. How to fix?

css

svg

cross-browser