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

你想要

List<Long> newList = new ArrayList<>();
for(Long item : l)
    if(Collections.frequency(l, item) == s.size()) 
        newList.add(item);
return newList;

否则转换将同时适用于use和svg元素。

根据SVG specification

引用的“符号”及其内容被深度克隆到生成的树中，但“符号”被“svg”替换。

这正是Firefox所做的。

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

1 个答案: