如何在SVG形状的某些边上设置描边宽度：1

在SVG的<rect>元素上设置描边宽度：1会在<rect>每一边放置一个描边。

如何在SVG矩形的三边放置笔触宽度？

Answer 1

如果你需要中风或者没有中风，那么你也可以使用stroke-dasharray来做到这一点，通过使短划线和间隙与矩形的边相匹配。

 rect { fill: none; stroke: black; } .top { stroke-dasharray: 0,50,150 } .left { stroke-dasharray: 150,50 } .bottom { stroke-dasharray: 100,50 } .right { stroke-dasharray: 50,50,100 } 

 <svg height="300"> <rect x="0.5" y="0.5" width="50" height="50" class="top"/> <rect x="0.5" y="60.5" width="50" height="50" class="left"/> <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/> <rect x="0.5" y="180.5" width="50" height="50" class="right"/> </svg> 

Answer 2

您不能在SVG中更改单个形状的各个部分的视觉样式（如果不存在尚未提供的“ vector效果”模块）。 相反，您将需要为每个笔划或您想要改变的其他视觉样式创build单独的形状。

特别是对于这种情况，不是使用<rect>或<polygon>元素，而是创build一个只覆盖矩形三边的<path>或<polyline> ：

 <!-- 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/

有关更多信息，请阅读<polyline>和更多function更强的<path>形状。

Answer 3

你可以使用折线的三个侧面，只是没有在矩形上的笔触。 我不认为SVG允许你将不同的笔画应用到path/形状的不同部分，所以你需要使用多个对象来获得相同的效果。