スタイルを使用しているため、FireFoxではsvgのタグイメージが表示されません。直し方？

Question

FirefoxとChromeで表示するのに違いがあります。私が調べたように、ChromeはイメージとFirefoxを表示している間にCSSを考慮に入れていません。

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です。 CSSを使用するためにFirefoxをプッシュする方法は？

PS：私はrelated questionを見つけましたが、私はroot要素にviewBoxを持っています。

Answer 1

SVG 1.1（現行の標準）では、propertiesのみCSSでスタイル指定できます。

次のSVG 2標準では、ほぼすべての属性がCSSでスタイル設定可能です。しかし、ブラウザはこの変更を実装し始めたばかりです。 ChromeはこれをFirefoxよりもさらに実装しています。

今のところ、これは別の方法で行う必要があります。つまり属性はwidth="20" height="20"です。