html - 为什么这个简单的 SVG 图标会缩放？

Question

我有一个 jsFiddle 演示: http://jsfiddle.net/L0a3xa7j/1/

我为窗口还原制作了一个简单的 SVG 图标。我希望它是 13x11。这是页面标记:

<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="i-restore" viewBox="0 0 13 11">
      <line  x1="2"  y1="0" x2="13" y2="0" stroke-width="1" stroke="white"/>
      <line  x1="13" y1="0" x2="13" y2="9" stroke-width="1" stroke="white"/>
      <rect x="0" y="2" width="11" height="9" stroke="white" fill="none" stroke-width="2"/>
    </symbol>
  </defs>
</svg>

<svg class="svg"><use xlink:href="#i-restore"/></svg>

这是 CSS:

body{background:#000}

.svg
{
    color:#FFF; width:13px; height:11px;
}

我希望矩形和 2 条线之间有 1 个像素的空间。矩形的笔划应为 2 像素粗，线条应为 1 像素粗。我不明白为什么当 css 像素尺寸与 SVG 的视框相匹配时纵横比不正确。

解决此问题的正确方法是什么？感谢您的帮助。

Answer 1

笔划的 1/2 出现在形状边界内，1/2 出现在形状边界外

<rect x="0" y="2" width="11" height="9" stroke="white" fill="none" stroke-width="2"/>

从 -1, 1 开始，宽度为 13 像素，高度为 11 像素。您的 svg 大小不足以容纳其内容的大小，并且溢出部分被剪掉了。

这就是为什么事物之间的空间也不像您期望的那样。