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

那只是抗锯齿。您可以 turn it off如果你想通过形状渲染 CSS 属性。 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>