SVG矩形的笔划宽度在顶部/左侧被切除。我该如何解决？

Question

当我的矩形具有较大的笔触宽度时，我的SVG的笔划会以某种方式被切断。我有以下代码：

bool lastMessage = message.getBooleanProperty("LastMessage");

这是jsfiddle：https://jsfiddle.net/7ej6fzbg/3/

从jsfiddle可以看出，矩形的顶部和左侧的笔划宽度略有缩小。如何解决这个问题，使整个矩形的笔划宽度为16像素？

我相信我可以改变矩形的x和y位置，但我相信如果我想稍后更改笔划宽度，那将不会非常强大。有什么想法吗？

Answer 1

由于矩形笔划以矩形边界为中心，因此对于X和Y，每次使用一半笔画宽度（在本例中为8）：

d.c.c1

或将SVG的视图框偏移笔画宽度的一半：

<svg width="500px" height="300px">
    <rect x="8" y="8" width="352" height="128" stroke="#333" stroke-width="16" fill-opacity="0"/>
</svg>