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

在 SVG 中的 <rect>元素上设置行程宽度: 1将在矩形的每一边都放置一个行程。

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

64014 次浏览

You cannot change the visual style of various parts of a single shape in SVG (absence the not-yet-available Vector Effects module). Instead, you will need to create separate shapes for each stroke or other visual style that you want to vary.

Specifically for this case, instead of using a <rect> or <polygon> element you can create a <path> or <polyline> that only covers three sides of the rectangle:

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

You can see the effect of these in action here: http://jsfiddle.net/b5FrF/3/

Red square with stroke on three sides

For more information, read about the <polyline> and more-powerful-but-more-confusing <path> shapes.

You could use a polyline for the three stroked sides, and just not put the stroke on the rectangle at all. I don't think SVG lets you apply different strokes to different parts of a path/shape, so you need to use multiple objects to get the same effect.

If you need stroke or no-stroke then you can also use stroke-dasharray to do this, by making the dashes and gaps match up with the sides of the rectangle.

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>

See jsfiddle.