为什么 SVG 元素内部会出现一个空白区域？答案

【问题标题】：Why is this an empty space appearing inside of SVG element?为什么 SVG 元素内部会出现一个空白区域？
【发布时间】：2017-02-11 06:57:44
【问题描述】：

我有这个问题的fiddle。如果我在 symbol 元素上设置 viewBox 属性，图标会正确显示。但是，如果我在 svg 元素上设置 viewBox 与 use 内部具有相同的值，则 use 元素周围会出现奇怪的空白空间，在 SVG 容器内部。

第一个变体的视口与第二个变体的视口相同 - 35x35px 大小，2.5x3.5px 坐标。

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

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

#svg-icons {
  display: none;
}
.icon {
  display: inline-block;
  border: 1px solid red;
}
.icon + .icon {
  margin-left: 20px;
}

<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>

【问题讨论】：

@amphetamachine 添加了带有正确示例的屏幕截图（当 svg-sprite 中的符号元素上的 viewBox 时）和不正确的图标（当外部 svg 元素上的 viewBox 时）。

标签： html css svg

【解决方案1】：

这个问题将通过考虑如何在绘图上处理使用元素来解决。
根据SVG 1.1 2nd edition，使用元素是指符号元素在绘图上被视为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 元素的渲染范围的位移截断。

【讨论】：