svg矩形边框未正确绘制

时间:2015-08-29 19:59:44

标签: html css svg

刚刚开始使用svg's。

我正在尝试绘制一个带边框的简单矩形,但似乎边框会以某种方式给我一个类似阴影的效果。它似乎绘制了比顶部和左边界更厚的右边和底边。非常奇怪。

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

以下是代码:

public class Map extends FragmentActivity implements OnMapReadyCallback, ConnectionCallbacks, OnConnectionFailedListener{
    @Override
    protected void onDestroy() {
        super.onDestroy();
 // To stop the service when the user closed the app in the background and the map ativity was opened.      
        stopAlarm();
        Intent i = new Intent(this, TrackingService.class);
        stopService(i);
        System.out.println("ABC Map onDestroy() was invoked!");

    }
}

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

2 个答案:

答案 0 :(得分:3)

您的矩形被<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)"/>

答案 1 :(得分:0)

@Matthew是正确的。另一种解决方案是将属性Flutter的SVG默认值修改为overflow: hidden