带笔划的圆角矩形 - svg 质量与 div 相比答案

【问题标题】：Rounded rectangle with stroke -- svg quality compared to div带笔划的圆角矩形 - svg 质量与 div 相比
【发布时间】：2019-03-12 12:14:55
【问题描述】：

我知道有不同的渲染过程，但为什么圆角矩形上的笔触与带边框的圆角 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 相比，这些角看起来很乱。

【问题讨论】：

尝试添加svg{overflow:visible;}
成功了。我一直认为visible 是溢出的默认值。我还为描边创建了一个单独的透明正方形，并在填充正方形之后绘制它，使其位于顶部。

标签： svg

【解决方案1】：

其中一部分是因为您的 rect 正是您的 svg 元素的大小，所以您将笔画宽度减半。看：

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

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

【讨论】：