如何仅在SVG形状的某些边上设置描边宽度：1？ [英] How to set a stroke-width:1 on only certain sides of SVG shapes?

问题描述

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

Setting a stroke-width: 1 on a <rect> element in SVG places a stroke on every side of the rectangle.

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

How does one place a stroke width on only three sides of an SVG rectangle?

推荐答案

需要中风或无中风，那么你也可以使用 stroke-dasharray 来做到这一点，通过使破折号和间隙与矩形的边相匹配。

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>

请参阅 jsfiddle 。

这篇关于如何仅在SVG形状的某些边上设置描边宽度：1？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！