javascript - 使用 stroke-dasharray 在所需位置显示线条

Question

我想在 0,20,40,60,80,100 从行 x1="0" 到 x2="100" 显示 6 个刻度，但最后一行不显示，只显示前 5 个。我正在使用以下代码

<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>

有没有办法在不改变行长的情况下完成。当 dash-array 中有 0 时会发生什么？我不确定

Answer 1

我认为这可能是您期望的最终结果

<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>