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

我试图用CSS缩放SVG图标，但它不起作用。
我用SVG与符号，所以我的HTML看起来像这样：在svg图标上的CSS缩放转换在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); 
}

在Firefox规模比Chrome或IE11不同。

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

来源

2016-07-25 Steven Mouret

你想.bloc> svg而不是.bloc svg不是吗？ –

哦，谢谢罗伯特，但为什么？ Firefox会像svg标签一样解释符号？ –

我在答案中解释过。 –

你想

.bloc > svg

否则将转换适用于使用和SVG元素两者。

按照SVG specification

引用的“符号”，其内容是深克隆到生成的树，例外的是，“符号”是由“SVG”代替。

而这正是Firefox所做的。

来源

2016-07-26 09:15:55

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

回答

相关问题