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)"/>