SVG笔划宽度在边界矩形内扩展

Question

我已经开始使用SVG并且（很快）遇到了障碍。

我试图找到一个方法和一个矩形的边框，但它只是“扩展”内部。目前我只是在矩形周围绘制一条路径并使用笔触宽度。当与css转换一起使用时，这具有显示“填充”动画的期望效果。但我不希望它扩展到矩形的边界之外。见图片

带路径

正如您所看到的，笔划宽度在两个方向上，在边界矩形之外和内部。我怎么能摆脱外面的位？

Answer 1

在内部<rect>元素中绘制<svg>，其大小与<rect>相同。内部<svg>元素将剪切<rect>。

如果需要，您也可以使用剪辑路径或剪辑执行此操作，但内部<svg>方式更简单。

Answer 2

我不相信笔画只能出现在该行的一侧（如果错误，有人会纠正我）。

以下是实现所需效果的两种方法：

方法＃1：

只需将边界矩形放在SVG中填充的内部矩形之前。填充的矩形将在＆＃34;以上＆＃34;由于SVG优先级规则而产生的边界矩形，如果将其展开到正确的大小，它将覆盖边界矩形的笔划内部。

方法＃2：

将stroke-width设置为当前值的一半，然后在所有方向上进一步向外绘制半个笔触宽度的边界矩形。