Partial border/stroke using SVG

Question

I'm using svg/d3 for creating a chart made of 'rect' elements.

What is the best way for adding a partical border/stroke for each rectangle (only on top of the rectangle)?

Thanks

Answer 1

I don't think SVG supports stroking only portions of a rectangle or path - stroke isn't like a CSS border. You're left with a few other options, all of which take some extra work:

• Stroke the entire rect and apply a clipPath to remove the other three edges - probably works best if you make the rectangles bigger than necessary.

• Apply a linear gradient fill to each rect, using the gradient definition to show a "border" at the top of the shape.

• Add a separate line element to act as the border for each rect.

• Use the stroke-dasharray property (docs) to set a dash definition where the "dash" only covers the top of the rect. This might be tricky to get right, but I suspect it wouldn't be too hard, as the stroke probably begins at the top left of the shape.