css - 由于使用样式，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"。