任何人都可以解釋爲什麼Firefox收穫這個SVG圖像？

任何人都可以解釋爲什麼Firefox作物SVG圖像？任何人都可以解釋爲什麼Firefox收穫這個SVG圖像？

它位於一個容器內並被縮放以適合CSS。

我使用<symbol>和<use>。

.container { 
 
    width: 1em; 
 
    height: 1em; 
 
} 
 
svg { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<svg style="display:none"> 
 
    <symbol id="icon_triangleup" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"> 
 
    <path d="M12.8,5.4c-0.377-0.504-1.223-0.504-1.6,0l-9,12c-0.228,0.303-0.264,0.708-0.095,1.047 C2.275,18.786,2.621,19,3,19h18c0.379,0,0.725-0.214,0.895-0.553c0.169-0.339,0.133-0.744-0.095-1.047L12.8,5.4z" /> 
 
    </symbol> 
 
</svg> 
 
<div class="container"> 
 
    <svg> 
 
    <use xlink:href="#icon_triangleup"></use> 
 
    </svg> 
 
</div>

來源

2017-01-19 Mark Stickling

我可以告訴你爲什麼，如，如何解決它。但不是爲什麼Chrome似乎忽略了在Firefox中導致問題的原因。

Firefox在<symbol>元素上使用24px設置的寬度和高度，因此刪除這些元素並將符號展開以填充其容器的空間。

如果您希望符號的各個實例的大小不同，您可以始終在<use>元素上設置width和height。

.container { 
 
    width: 1em; 
 
    height: 1em; 
 
} 
 
svg { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<svg style="display:none"> 
 
    <symbol id="icon_triangleup" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> 
 
    <path d="M12.8,5.4c-0.377-0.504-1.223-0.504-1.6,0l-9,12c-0.228,0.303-0.264,0.708-0.095,1.047 C2.275,18.786,2.621,19,3,19h18c0.379,0,0.725-0.214,0.895-0.553c0.169-0.339,0.133-0.744-0.095-1.047L12.8,5.4z" /> 
 
    </symbol> 
 
</svg> 
 
<div class="container"> 
 
    <svg> 
 
    <use xlink:href="#icon_triangleup"></use> 
 
    </svg> 
 
</div>

來源

2017-01-19 16:35:33 hungerstar

任何人都可以解釋爲什麼Firefox收穫這個SVG圖像？

回答

相關問題