Chrome正在削减SVG图片的边缘，而其他浏览器则没有

问题描述

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

...但是它们在Chrome（MacOS和Windows）中都像这样被修剪掉了：

源图像是正方形的（即使有额外的内部空白，它们也具有正方形viewBox es，并且我的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忽略了SVG图像的viewBox值，而是找到了图像的内部边缘，并据此进行缩放（但这只是一个猜测）。 （不，不是。）

这是其中一个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,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,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,4.035,4.572,0c0.536,0.524,0.416,0.416c0,1.762,6.373,8.742
        c0,0.768,1.266,1.266s1.842,2.998,0c1.154,0.285,0.867,0.867s-4.904,6.51-5.588,7.193
        C15.092,18.979,14.62,18.426,18.426z"/>
</g>
</svg>

我尝试在Google上寻求该问题的答案时，只能找到讨论的非常不同的主题，因此我希望可能遇到类似问题的人可以提出解决建议。

更新：

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

如果我绕过使用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,2.016-2.012
              v-8.861H25.462z"/>
            <path fill="#0F0" d="M14.62,0-8.723
              c0,8.742
              c0,7.193
              C15.092,18.426z"/>
          </g>
        </svg>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）