我已经开始使用SVG并且（很快）遇到了障碍 .
我试图找到一个方法和一个矩形的边框，但它只是“扩展”内部 . 目前我只是在矩形周围绘制一条路径并使用笔触宽度 . 当与css转换一起使用时，这具有显示“填充”动画的期望效果 . 但我不希望它扩展到矩形的边界之外 . 看图像
与路径
正如您所看到的，笔划宽度在两个方向上，在边界矩形之外和内部 . 我怎么能摆脱外面的位？
在内部 <svg> 元素中绘制 <rect> ，该元素与 <rect> 的大小相同 . 内部 <svg> 元素将剪切 <rect> .
<svg>
<rect>
如果需要，您也可以使用剪辑路径或剪辑执行此操作，但内部 <svg> 方式更简单 .
我不相信有可能只让笔画出现在一行（有人纠正我，如果这是错的） .
以下是实现所需效果的两种方法：
方法＃1：
只需将边界矩形放在SVG中填充的内部矩形之前 . 由于SVG优先级规则，填充的矩形将位于边界矩形的“上方”，如果将其展开到正确的大小，它将覆盖边界矩形的笔划的内部部分 .
方法＃2：
将 stroke-width 设置为其当前值的一半，然后在所有方向上进一步向外绘制半个笔划宽度的边界矩形 .
stroke-width
2 回答
在内部
<svg>元素中绘制<rect>，该元素与<rect>的大小相同 . 内部<svg>元素将剪切<rect>.如果需要，您也可以使用剪辑路径或剪辑执行此操作，但内部
<svg>方式更简单 .我不相信有可能只让笔画出现在一行（有人纠正我，如果这是错的） .
以下是实现所需效果的两种方法：
方法＃1：
只需将边界矩形放在SVG中填充的内部矩形之前 . 由于SVG优先级规则，填充的矩形将位于边界矩形的“上方”，如果将其展开到正确的大小，它将覆盖边界矩形的笔划的内部部分 .
方法＃2：
将
stroke-width设置为其当前值的一半，然后在所有方向上进一步向外绘制半个笔划宽度的边界矩形 .