带笔划的圆角矩形——svg质量与div相比

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

正文{
背景：#1A1A；
显示器：flex；
证明内容：中心；
填充顶部：50px；
}
.svg广场{
填料：75604A；
笔画：白色；
笔画宽度：1px；
}
·分区广场{
背景色：#75604A；
左边距：10px；
宽度：60px；
高度：60px；
边框：1px纯白；
边界半径：10px；
}
跨度{
显示：块；
利润率：20px；
颜色：白色；
}

svg
div

部分原因是，您正在将笔划宽度减少一半，因为您的rect正好是svg元素的大小。看看：

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

---

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

尝试添加

svg{overflow:visible；}

，这样做就成功了。我一直认为

visible

是溢出的默认值。我还为笔划创建了一个单独的透明正方形，并在填充的正方形之后绘制，因此它位于顶部。