html – svg矩形边框未正确绘制

刚刚开始使用svg的.

我试图绘制一个带边框的简单矩形,但似乎边框在某种程度上给我一个类似阴影的效果.它似乎绘制了比顶部和左边界更厚的右边和底边.很奇怪.

当我做圆边和正常锐边时会发生这种情况.

这是代码：

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

我加入了PLNKR：http://plnkr.co/edit/HGBTNyjasqzwtguOIbnV

解决方法

您的矩形被< svg>的边缘剪裁.笔划宽度使矩形更宽,但不会自动调整其位置.将x =“1”和y =“1”添加到< rect>

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