HTML + js 生成一个线路走向图，可以标记总共有多少站，用户到达第几站了
文章目录
- 前言
- 一、用途
- 二、使用步骤
- 1.轨迹代码
- 2.运行
前言
HTML + js 生成一个线路走向图
例如：用来记录用户到达那一站了，可以标记总共有多少站，用户到达第几站了
提示：以下是本篇文章正文内容，下面案例可供参考
一、用途
用来记录用户到达那一站了，可以标记总共有多少站，用户到达第几站了
二、使用步骤
1.轨迹代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轨迹</title>
</head>
<body><div id="track-box" style="position: relative; width: 100%; height: 300px;"></div><script>class Track {SVG_NS = 'http://www.w3.org/2000/svg'SVG_LINK_NS = 'http://www.w3.org/1999/xlink'STROKE_COLOR = '#deb0bd'STROKE_WIDTH = 10constructor(el, points) {this.parent = elthis.bounds = this._getBoundary(points)this.points = this._pointConvert(points)this.viewBox = [0, this.bounds.maxY - el.clientHeight, el.clientWidth, el.clientHeight]this._isMouseDown = falsethis._moveStart = { x: 0, y: 0 }this._offset = { x: 0, y: 0 }this.init()}init() {if (this.svg) returnconst { SVG_NS, SVG_LINK_NS, STROKE_COLOR, viewBox, _moveStart, _offset } = thisconst svg = document.createElementNS(SVG_NS, 'svg')svg.