How to set the stroke width: 1 only on certain sides of SVG shapes?

Question

Setting the stroke width: 1 in the <rect> element in the SVG places a stroke on all sides of the rectangle.

How to place the stroke width on only three sides of an SVG rectangle?

Answer 1

If you need a stroke with or without a stroke, you can also use stroke-dasharray to make dashes and spaces that match 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 .

Answer 2

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

In particular, for this case, instead of using the <rect> or <polygon> element, you can create a <path> or <polyline> that spans only 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" /> 

Here you can see the effect of these actions: http://jsfiddle.net/b5FrF/3/

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

Answer 3

You can use the polyline for the three stroked sides and just don't put the stroke on the rectangle. I don’t think SVG allows you to apply different strokes to different parts of the path / shape, so you need to use several objects to get the same effect.