102

在 SVG中的元素上设置 stroke-width: 1<rect>会在矩形的每一侧放置一个笔触。

如何仅在 SVG 矩形的三个边上放置笔画宽度？

4

3 回答 3

175

如果您需要笔划或无笔划，那么您也可以使用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。

于 2012-01-25T10:09:13.060 回答
33

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

特别是对于这种情况，您可以创建一个or仅覆盖矩形的三个边，而不是使用<rect>or元素：<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>形状。

于 2012-01-23T19:09:51.497 回答
2

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

于 2012-01-23T19:10:50.510 回答