2

Good day.

I'm not new in javascript and CSS, but I'm also not to good with SVG.

I've been battling with this issue.

I would like to know can you add borders to only one side of a rectangle. e.g. Just the bottom or just the left.

I've been to these links while searching but not helping much.

Stroke left and right side of rect svg

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

Thank you advance.

(",)

EDIT:

I hope this will be more clear to your understanding.

<g id="fdtElem307Group" fdtUngroupable="fdtUngroupable" fdtSelectable="fdtSelectable" fdtType="cursiveNotes" fdtTypeFormat="Converted" fdtFormatOptions="1" fdtFormat="Cursive" fdtTabIndex="24" fdtFieldName="Notes18" fdtResizable="fdtResizable" fdtfont-size="12" fdtRows="4">
<rect id="fdtElem303" fill="#ffffff" stroke="#000000" stroke-dasharray="5,2" stroke-width="1" x="114" y="968" width="240" height="24" vector-effect="non-scaling-stroke" fdtSelectable="fdtSelectable" fdtActualHeight="25" fdtActualWidth="241" fdtActualY="967" fdtActualX="113"></rect>
<rect id="fdtElem304" fill="#ffffff" stroke="#000000" stroke-dasharray="5,2" stroke-width="1" x="114" y="992" width="240" height="24" vector-effect="non-scaling-stroke" fdtSelectable="fdtSelectable" fdtActualHeight="25" fdtActualWidth="241" fdtActualY="991" fdtActualX="113"></rect>
<rect id="fdtElem305" fill="#ffffff" stroke="#000000" stroke-dasharray="5,2" stroke-width="1" x="114" y="1016" width="240" height="24" vector-effect="non-scaling-stroke" fdtSelectable="fdtSelectable" fdtActualHeight="25" fdtActualWidth="241" fdtActualY="1015" fdtActualX="113"></rect>
<rect id="fdtElem306" fill="#ffffff" stroke="#000000" stroke-dasharray="5,2" stroke-width="1" x="114" y="1040" width="240" height="24" vector-effect="non-scaling-stroke" fdtSelectable="fdtSelectable" fdtActualHeight="25" fdtActualWidth="241" fdtActualY="1039" fdtActualX="113"></rect>
</g>
Community
  • 1
  • 1
Norris
  • 2,228
  • 3
  • 15
  • 16

1 Answers1

4

You can use stroke-dasharray it's a bit of hack but it will work

Stroke on left -

<svg width="500" height="500">
<rect x="10" y="10" fill="orange" width="200" height="100" stroke-dasharray = "100 1000" stroke = "black" stroke-width="5" stroke-dashoffset ="-500"/></svg>
</svg>

Stroke on bottom

<svg width="500" height="500">
<rect x="10" y="10" fill="orange" width="200" height="100" stroke-dasharray = "200 1000" stroke = "black" stroke-width="5" stroke-dashoffset ="-300"/></svg>
</svg>
Akshay
  • 14,138
  • 5
  • 46
  • 70