如何在SVG形状的某些边上设置笔划宽度:1？

Question

<rect>在SVG中的元素上设置笔触宽度:1会在矩形的每一边放置笔划.

如何仅在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>

见jsfiddle.

Answer 2

您无法在SVG中更改单个形状的各个部分的视觉样式(缺少尚未可用的矢量效果模块).相反,您需要为每个笔划或其他您想要改变的视觉样式创建单独的形状.

特别是对于这种情况,您可以创建一个或仅覆盖矩形的三个边来代替使用<rect>或<polygon>元素:<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>更强大但更令人困惑的<path>形状.