为什么SVG的笔划宽度与边框宽度不同？

Question

为什么<svg>1px stroke-width宽于<div>1px border-width？

是否有可能创建一个<svg>看起来完全像<div>下面的？

<svg>
  <rect x="10" y="10" width="100" height="100" stroke-width="1" stroke="red" fill="white" />
</svg>

<div style="margin: 0 0 10px 10px; width: 100px; height: 100px; border: 1px solid red">
</div>

Answer 1

那只是抗锯齿.你可以将其关闭,如果你通过形状呈现CSS属性想要的.将坐标调整0.5px也可以.

<svg>
  <rect x="10" y="10" width="100" height="100" stroke-width="1" stroke="red" fill="white" shape-rendering="crispEdges" />
</svg>

<div style="margin: 0 0 10px 10px; width: 100px; height: 100px; border: 1px solid red">
</div>