如何仅在 SVG 形状的某些侧面设置笔画宽度：1？

如果您需要描边或无描边，那么您也可以使用 stroke-dasharray 来执行此操作，方法是使破折号和间隙与矩形的边相匹配。

矩形{填充：无；中风：黑色； } .top { stroke-dasharray: 0,50,150 } .left { stroke-dasharray: 150,50 } .bottom { stroke-dasharray: 100,50 } .right { stroke-dasharray: 50,50,100 }

请参阅jsfiddle。

您无法在 SVG 中更改单个形状的各个部分的视觉样式（缺少尚不可用的 Vector Effects 模块）。相反，您需要为每个笔画或您想要改变的其他视觉样式创建单独的形状。

对于这种情况，您可以创建一个仅覆盖矩形三个边的 <path> 或 <polyline>，而不是使用 <rect> 或 <polygon> 元素：

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 -->
<path d="M50,50 L150,50 150,150 50,150" />
<polyline points="50,50 150,50 150,150 50,150" />

您可以在此处查看这些操作的效果：http://jsfiddle.net/b5FrF/3/

https://i.stack.imgur.com/2sqMu.png

如需更多信息，请阅读 <polyline> 和更强大但更令人困惑的 <path> 形状。

您可以对三个被描边的边使用折线，而根本不将描边放在矩形上。我不认为 SVG 允许您将不同的笔触应用于路径/形状的不同部分，因此您需要使用多个对象来获得相同的效果。