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

- Tom O'Brien

Answer 1

您的矩形被<svg>的边缘剪裁了。描边宽度使矩形变宽，但不会自动调整其位置。请在<rect>中添加x="1"和y="1"

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

- Matthew Dunbar

Answer 2

@Matthew是正确的。另一个解决方案可能是修改SVG的属性overflow:hidden的默认值为overflow:visible。

- luissevillano