css - Chrome 正在剪裁 SVG 图像的边缘，而其他浏览器则没有

Question

我有一些我正在使用的 SVG 图标在 Firefox 和 Safari 中正确显示，如下所示：

...但它们在 Chrome（MacOS 和 Windows）中像这样被剪裁在边缘：

源图像是正方形的（它们有 square viewBoxes，即使有额外的内部空白），我的 SVG 标记将它们视为正方形：

        <image id="download" href="assets/download.svg" x="161.5" y="0.5" width="2.5" height="2.5"/>

        <text id="low-battery-text" x="169" y="2.75" text-anchor="end"></text>
        <image id="low-battery" href="assets/low-battery.svg" x="169.5" y="0.5" width="2.5" height="2.5"/>

如果我将这些图标的指定高度设置得更高一些，Chrome 就会停止剪裁它们，但这也会稍微改变图像的定位和缩放比例。此外，它不应该是必要的。

我的印象是 Chrome 忽略了viewBoxSVG 图像的值，它正在寻找图像的内部边缘，并据此进行缩放（但这只是一个猜测）。 （不，不是这样。）

这是其中一个 SVG 文件中的 SVG 的样子：

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<g>
    <path fill="#0F0" d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
        v-8.861H25.462z"/>
    <path fill="#0F0" d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
        c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
        c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
        C15.092,18.979,14.62,18.426,14.62,18.426z"/>
</g>
</svg>

当我尝试谷歌寻找这个问题的答案时，我只能找到讨论的非常不同的主题，所以我希望可能遇到类似问题的人可以提出解决它的建议。

更新：

有趣的实验——这不是一个好的解决方案，但它可能揭示了潜在的问题。

如果我绕过使用 SVG 图像文件，并将 SVG 文件的内容粘贴到我自己的 SVG 中，剪切问题就会消失：

        <svg viewBox="0 0 30 30" x="161.5" y="0.5" width="2.5" height="2.5">
          <g>
            <path fill="#0F0" d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
              v-8.861H25.462z"/>
            <path fill="#0F0" d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
              c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
              c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
              C15.092,18.979,14.62,18.426,14.62,18.426z"/>
          </g>
        </svg>

标签： cssgoogle-chromesvg