display lines at required position using stroke-dasharray

Question

I want to display 6 ticks at 0,20,40,60,80,100 from line x1="0" to x2="100" but last line is not display only first 5 are displayed. I am using the following code

<div>
  <svg width="200">
    <line x1="0" x2="100" stroke-width="30" stroke="black" stroke-dasharray="1 19 1 19 1 19 1 19 1 19 1"/>
    <line x1="0" x2="100" stroke-width="15" stroke="black" stroke-dasharray="0 9 1 19 1 19 1 19 1 19 1 10"/>
  </svg>
</div>

Is there a way to accomplish without changing the line length. And what happens when dash-array has 0 in it? I was not sure

Answer 1

I think this might be the end result you are expecting

<div>
  <svg width="200">
    <line x1="0" x2="100" stroke-width="30" stroke="black" stroke-dasharray="1 19 1 19 1 19 1 19 1 19 1"/>
    <line x1="0" x2="80" stroke-width="15" stroke="black" stroke-dasharray="0 9 1 19 1 19 1 19 1 19 1 10"/>
  </svg>
</div>