svgアイコンのCSSスケール変換がFirefoxで機能しない

Question

CSSでSVGアイコンを拡大しようとしましたが、機能しません。
私のHTMLは次のようになりますので、私は記号でSVGを使用する：Firefoxの規模で

<div class="bloc"> 
    <svg class="icon"> 
    <use xlink:href="#sym01"></use> 
    </svg> 
</div> 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> 
    <symbol id="sym01" viewBox="0 0 16 16"> 
    <path d="M14.211 7.367c0.91-0.063 1.506-0.471 1.758-1.035 -0.346 0.22-1.35 0.439-1.914 0.22 0-0.125-0.031-0.251-0.063-0.376 -0.439-1.569-1.883-2.824-3.42-2.667 0.125-0.031 0.252-0.094 0.377-0.125 0.156-0.063 1.16-0.22 1.004-0.565 -0.127-0.314-1.35 0.219-1.568 0.282 0.313-0.094 0.783-0.282 0.846-0.627 -0.469 0.063-0.91 0.282-1.254 0.596 0.125-0.156 0.219-0.313 0.25-0.501C9.004 3.351 8.282 4.92 7.717 6.457c-0.47-0.439-0.878-0.784-1.223-0.973C5.458 4.951 4.267 4.386 2.353 3.665 2.321 4.292 2.667 5.14 3.733 5.704 3.514 5.673 3.074 5.735 2.761 5.798c0.125 0.721 0.564 1.318 1.788 1.6C3.984 7.43 3.702 7.555 3.451 7.837c0.251 0.502 0.878 1.098 1.977 0.973 -1.224 0.533-0.502 1.506 0.502 1.38 -1.726 1.757-4.424 1.632-5.961 0.157 4.047 5.49 12.833 3.263 14.149-2.071 0.973 0.031 1.568-0.345 1.914-0.722C15.467 7.649 14.652 7.555 14.211 7.367z"/> 
    </symbol> 
</svg> 

と私のCSS

.bloc svg { 
    width: 16px; 
    height: 16px; 
    transform-origin: 8px 8px; 
    transform: scale(4); 
} 

はクロームまたはIE11とは異なります。

https://jsfiddle.net/korigan/0dz5hn07/

Answer 1

あなたがそうでなければ、使用してSVG要素の両方に適用される変換

.bloc > svg 

をしたいです。 SVG specification

参照「シンボル名」と、その内容に応じ

'は、シンボルが「SVG」によって置き換えられることを除いて、ディープクローン化生成ツリーにあります。

Firefoxとまったく同じです。