html - SVG:如何圆化笔划和矩形 Angular ？

Question

是否可以在 SVG 中对矩形进行圆 Angular 处理，同时确保描边符合 Angular 的圆度？以下代码无效。

无中风:

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>

笔划似乎是沿着原来的尖 Angular 而不是圆 Angular 。

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>

宽字符串超出 Canvas 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>

更新

添加了 View 框。矩形 x 和 y 的坐标增加，SVG 包裹在一个容器中，可以作为一个单独的 block 嵌入到 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 Canvas 内部