SVG 描边宽度在边界矩形内扩展

Question

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

我正在尝试找到一种方法在矩形周围添加边框，但它只能在内部“扩展”。目前我只是在矩形周围绘制一条路径并使用描边宽度。当与 css 过渡一起使用时，这会达到显示“填充”动画的预期效果。但我不希望它扩展到矩形的边界之外。看图片

有路径

如您所见，笔划宽度在两个方向上延伸：边界矩形的外部和内部。我该如何去掉外面的部分？

Answer 1

在内部

<rect>

元素内绘制

<svg>

，其大小与

<rect>

相同。内部

<svg>

元素将剪辑

<rect>

。

如果需要，您也可以使用剪辑路径或剪辑来执行此操作，但内部

<svg>

方式更简单。

Answer 2

我不相信笔画可能只出现在线条的一侧（如果这是错误的，请纠正我）。

这里有两种方法可以达到您想要的效果：

方法#1：

只需将边界矩形放在 SVG 中填充的内部矩形之前即可。由于 SVG 优先规则，填充的矩形将位于边界矩形的“上方”，如果将其展开到正确的大小，它将覆盖边界矩形笔划的内部部分。

方法#2：

将

stroke-width

设置为其当前值的一半，然后在所有方向上进一步绘制半个描边宽度的边界矩形。