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