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

你给线条划线2。

设置stroke-width="1"。 fiddle（我放大了视图）

修改

尝试使用方形视框fiddle

viewBox="0 0 15 15"

Answer 2

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大小不足以容纳其内容的大小，并且溢出被剪裁。

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

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

2 个答案: