Question

任何人都可以解释为什么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>

Answer 1

我可以告诉你为什么，如何解决它。但不是为什么Chrome似乎忽略了导致Firefox出现问题的原因。

Firefox正在使用24px元素上设置的<symbol>宽度和高度，因此请删除它们，符号将展开以填充其容器的空间。

如果您希望符号的各个实例的大小不同，则始终可以在width元素上设置height和<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" 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>

任何人都可以解释为什么firefox裁剪这个SVG图像？

1 个答案: