CODEWITHSUNDEEP
htmlsvg
anand
anand

Reputation: 11349

Specify border for svg path element

I am trying to to border for svg path element using stroke attribute but its not drawing border on all four borders.Any idea how to draw on all four borders

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg >
<path fill="rgba(103,103,103,.35)" d="M 149.5 8 L 149.5 40 316.5 40 316.5 8" stroke-width="3" stroke='#3fa9f5' ></path>
</svg> 



</body>
</html>

Upvotes: 1

Views: 2773

Answers (1)

Carsten Massmann
Carsten Massmann

Reputation: 28236

You seem to have forgotten to close your path with Z like

<svg  width=320 height=50 viewBox="0 0 320 50">
  <path fill="rgba(103,103,103,.35)" d="M 149.5 8 L 149.5 40 316.5 40 316.5 8 Z" stroke-width="3" stroke='#3fa9f5' ></path>
</svg>

This will draw the missing line too. It is also a good idea to include the width and height attributes into the <svg> tag.

Some more unsolicited advice ...
Maybe you should also include a viewBox="0 0 320 50" attribute into your <svg> tag too, as in a general case (when the svg resides in a separate file) this will make the inclusion of the svg content into other pages much easier. It will allow scaling of the svg-contents if you include it with an <object data="mysvgdata.svg" type="image/svg+xml" width="640"> tag. The result would be similar to this: 

<svg  width=640 viewBox="0 0 320 50">
  <path fill="rgba(103,103,103,.35)" d="M 149.5 8 L 149.5 40 316.5 40 316.5 8 Z" stroke-width="3" stroke='#3fa9f5' ></path>
</svg>

Upvotes: 2

Related Questions