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

Question

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

How does one place a stroke width on only thr

Answer 1

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 or element you can create a or that only covers three sides of the rectangle:

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

For more information, read about the and more-powerful-but-more-confusing shapes.