为什么这个空格出现在SVG元素中？

Question

我有fiddle这个问题。如果我在符号元素上设置viewBox属性，则图标显示正确。但是如果我在 svg 元素中使用使用设置相同值的viewBox，那么在使用元素周围会出现奇怪的空格，在SVG容器内部。

第一个变体的视口与第二个变体的视口相同 - 在2.5x3.5px coords处为35x35px大小。

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

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

＆＃13;

＆＃13;

<svg version="1.1" id="svg-icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="icon-1" viewBox="2.5 3.5 35 35">
    <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" />
  </symbol>
  <symbol id="icon-2">
    <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" />
  </symbol>
</svg>

<svg class="icon icon-1" width="100" height="100">
  <use xlink:href="#icon-1"></use>
</svg>

<svg class="icon icon-2" viewBox="2.5 3.5 35 35" width="100">
  <use xlink:href="#icon-2"></use>
</svg>

＆＃13;

if (document.documentElement.clientWidth < 900) {
    // scripts
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

这个问题将通过考虑如何在绘图上处理使用元素来解决 根据{{​​3}}，使用元素引用符号元素在绘图时被视为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元素的渲染范围来截断形状。