Преобразование масштаба CSS на значок svg не работает в Firefox

Question

Я попытался масштабировать значок SVG с помощью CSS, но он не работает.
Я использовал СВГ с символом так что мой HTML выглядит следующим образом:

<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); 
} 

В масштабе Firefox отличается, чем Chrome или IE11.

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

Answer 1

Вы хотите

.bloc > svg 

В противном случае преобразование будет применяться и к использованию и элементов SVG.

Согласно SVG specification

ссылочного «символом» и его содержимое глубоко-клонируют в сгенерированном дерева, с тем исключением, что «символ» заменяется на «SVG».

И это именно то, что делает Firefox.