2

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

OriWei
  • 73
  • 2
  • 5
  • Do you mean something like the dasharray property? – Lars Kotthoff Jul 28 '13 at 18:30
  • Possible duplicate of [How to set a stroke-width:1 on only certain sides of SVG shapes?](http://stackoverflow.com/questions/8976791/how-to-set-a-stroke-width1-on-only-certain-sides-of-svg-shapes) – Ben Oct 12 '15 at 00:56

1 Answers1

8

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.

nrabinowitz
  • 55,314
  • 10
  • 149
  • 165