SVG：如何圆角和矩形角？

Question

是否可以在 SVG 中对矩形进行圆化处理，同时确保笔划遵循角的圆度？下面的代码不起作用。

无中风：

stroke-width="0px"

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" stroke="red" stroke-width="0px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>

有中风：

stroke-width="10px"

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>

笔画似乎遵循原来的尖角而不是圆角。

Answer 1

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>

宽字符串延伸到画布 SVG 的 svg 边框之外。因此，字符串被部分裁剪。

您必须减小矩形的大小，以便该线可见，并将矩形的左上角向右和向下移动x="5"，然后y="5"

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect x="5" y="5" width="90" height="90" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>

更新

添加了视图框。矩形x和y的坐标增加，SVG 包装在容器中，并且可以作为单独的块嵌入到 HTML 页面中。自适应应用

.container {
width:30%;
height:30%
}

<div class="container">
<svg  viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="90" height="90" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>
</div>

从图中可以看到，一个宽笔画的正方形完全位于SVG画布内部

Answer 2

<svg width="400" height="180">
    <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
          style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>