CODEWITHSUNDEEP
htmlcsssvg
salman
salman

Reputation: 27

HTML/CSS and svg

I'm making an SVG diagram in HTML line in the code below. I have a an SVG line, I have applied strokedashed array to divide the line with gaps. However I want to divide the SVG line into dots separated by gaps (meaning circles). Is it possible?

<div style="height: 50%; width: 50%; margin-top: 40px; background: yellow; padding: 10px;">
    <svg width="50%" height= 50%; >
      <line class="line" x1="10" y1="0" x2="10" y2="100%" style="stroke:blue;stroke-width:20;" />  
    </svg>
</div>

Any help would be appreciated

Upvotes: 0

Views: 48

Answers (1)

Jochen
Jochen

Reputation: 684

I found a nice jsfiddle for this.

stroke-linecap seems to be the trick.

https://jsfiddle.net/eliranmal/hsfxS/

Upvotes: 1

Related Questions