带笔触的圆角矩形-svg质量与div相比

Question

我知道有一个不同的渲染过程，但是为什么与带有边框的div相比，在矩形矩形上的笔划是如此时髦？

body {
  background: #1a1a1a;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

.svg-square {
  fill: #75604A;
  stroke: white;
  stroke-width: 1px;
}
.div-square {
  background-color: #75604A;
  margin-left: 10px;
  width: 60px;
  height: 60px;
  border: 1px solid white;
  border-radius: 10px;
}

span {
  display: block;
  margin:  20px;
  color: white;
}

<span>svg</span>

<svg width="60" height="60">
  <rect class="svg-square" width="60" height="60" rx="10" />
</svg>

<div class="div-square"></div>
<span>div</span>

字段：https://codepen.io/kirkbross/pen/gEGGvx

在svg上看起来好像是半个像素的笔触，即使将其增加到2，其侧面也似乎比顶部和底部更薄。

我想在这里了解物理学。此示例是一个笔触为1的svg。与带有边框的div相比，这些角看上去有些奇怪。

Answer 1

部分原因是您削减了笔划宽度的一半，因为rect恰好是svg元素的大小。看：

 <rect x="1" y="1" class="svg-square" width="58" height="58" rx="10" />

圆角仍然不如CSS绘图好-但更为合理。