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

Question

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

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

带路径

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

Answer 1

画<rect>内在<svg>与 <rect> 大小相同的元素。内在<svg>元素将剪辑 <rect> .

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