html - svg rect圆看起来取决于其位置

我将rx =“ 3” ry =“ 5”设置为所有矩形，但外观不同取决于其缩放比例100％，为什么？有任何想法吗？

最佳：

<rect x="217.5" y="-8" style="fill:white;stroke-width:1;stroke:rgb(0,0,0)"
width="45px" height="27px" rx="3" ry="5">
</rect>

<rect x="167.5" y="-8" viewBox="0 0 100 100" rx="3" ry="5"
style="fill:white;stroke-width:1;stroke:rgb(0,0,0)" width="45px" height="27px">
</rect>

对：

<rect rx="3" ry="5" x="356" y="73" style="fill:white;stroke-width:1;stroke:rgb(0,0,0)"
width="45px" height="27px" viewBox="0 0 100 100"></rect>

最佳答案

我使用<foreignObject>解决了这个问题

<foreignObject x="356" y="73" width="50px" height="40px">
    <div style="background-color:white; width:45px; height:27px; border-radius:4px; border:1px solid black;"></div>
</foreignObject>

关于html - svg rect圆看起来取决于其位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59449733/