svg 图标上的 CSS 缩放变换在 Firefox 中不起作用

Question

我尝试使用 CSS 缩放 SVG 图标，但它不起作用。
我使用了带有符号的 svg，所以我的 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

否则转换将应用于 use 和 svg 元素。

根据SVG specification

The referenced ‘symbol’ and its contents are deep-cloned into the generated tree, with the exception that the ‘symbol’ is replaced by an ‘svg’.

而这正是 Firefox 所做的。