<hr />上有多个点

Question

我看过this链接并使用代码，我可以成功实现这一点。 我的要求是保持线上的多个点在25％，30％......等等动态。这些值来自数据库。

想知道如何实现这一目标。

Answer 1

通过 svg 执行此操作的代码非常简单。

＆＃13;

＆＃13;

#lineWithDots {
  width: 100%;
  height: 20;
}

#lineWithDots rect {
  width: 100%;
  stroke: rgb(164, 188, 194);
}

#lineWithDots circle {
  stroke: rgb(0, 0, 0);
  fill: rgb(255, 255, 255);
}

＆＃13;

<svg id="lineWithDots">
  <g transform="translate(0,10)">
    <rect height="2" y="-1" />
    <circle r="4" cx="35%" />
    <circle r="4" cx="85%" />
  </g>
</svg>

＆＃13;

＆＃13;

＆＃13;