Html 为什么这是SVG元素内部出现的空白？

我对这个问题有信心。如果我在符号元素上设置了viewBox属性，图标将正确显示。但是，如果我在svg元素上设置了与use相同值的viewBox，则use元素周围会出现奇怪的空白，位于svg容器内部

第一种变体的视口与第二种变体的视口相同，尺寸为35x35px，坐标为2.5x3.5px

这种行为的原因是什么？虫子还是我自己的错误

编辑：添加包含正确和不正确区域的图片。

#svg图标{
显示：无；
}
.图标{
显示：内联块；
边框：1px纯红；
}
.图标+.图标{
左边距：20px；
}

---

这个问题将通过思考如何在图纸上处理use元素来解决。
根据，使用元素指符号元素在图形上被视为svg元素。因此，svg结构的结果与此相同

<svg class="icon icon-2" viewBox="2.5 3.5 35 35" width="100">
    <g>
        <svg width="100%" height="100%">
            <rect x="2.5" y="3.5" stroke="#000000" stroke-miterlimit="10" width="35" height="35" />
            <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="20" cy="21" r="14" />
        </svg>
    </g>
</svg>

内部svg元素的宽度和高度范围为100%，位于（0,0），外部svg元素的viewBox偏移量为（2.5,3.5）

---

因此，形状会被2个svg元素的渲染范围的位移切断。

@amphetamachine添加了屏幕截图，其中包含正确（当svg精灵中的符号元素上出现viewBox时）和错误图标（当svg元素上出现viewBox时）的示例。