为什么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

那只是抗锯齿。如果需要，可以通过shape-rendering CSS属性turn it off。 Adjusting the co-ordinates by 0.5px may also work

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