svg 矩形边框绘制不正确

Question

刚刚开始使用 svg。

我正在尝试绘制一个带边框的简单矩形，但边框似乎以某种方式给了我类似阴影的效果。它似乎绘制的右侧和底部边框比顶部和左侧边框粗得多。很奇怪。

当我做圆形边缘和正常锐利边缘时会发生这种情况。

这是代码：

<svg>
    <rect width="30" height="30" rx="5"
        style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

我已经包含了一个 PLNKR：http ://plnkr.co/edit/HGBTNyjasqzwtguOIbnV

Answer 1

您的矩形正在被<svg>. 笔画宽度使矩形更宽，但不会自动调整其位置。添加x="1"和y="1"到您的<rect>

<rect x="1" y="1" width="30" height="30" rx="5"
        style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"/>