谁能解释为什么 Firefox 会裁剪这个 SVG 图像？答案

【问题标题】：Can anyone explain why firefox crops this SVG image?谁能解释为什么 Firefox 会裁剪这个 SVG 图像？
【发布时间】：2017-01-20 00:45:54
【问题描述】：

谁能解释为什么 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>

【问题讨论】：

标签： css firefox svg

【解决方案1】：

我可以告诉你为什么，例如，如何解决它。但这并不是为什么 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>

【讨论】：