用svg 画两天带有检测点的铁轨，每个监测点鼠标移入tip提示，注意轨道平行画，画的形象些，写出具体代码

以下是用SVG画两段带有检测点的铁轨的代码：

<svg width="600" height="200">
  <g>
    <!--第一段铁轨-->
    <path d="M50,100 L500,100" stroke="black" stroke-width="10" />
    <!--第一段检测点-->
    <circle cx="150" cy="100" r="10" fill="red" />
    <text x="155" y="100" font-size="16" font-weight="bold">检测点1</text>
    <circle cx="350" cy="100" r="10" fill="red" />
    <text x="355" y="100" font-size="16" font-weight="bold">检测点2</text>
  </g>
  <g>
    <!--第二段铁轨-->
    <path d="M50,150 L500,150" stroke="black" stroke-width="10" />
    <!--第二段检测点-->
    <circle cx="250" cy="150" r="10" fill="red" />
    <text x="255" y="150" font-size="16" font-weight="bold">检测点3</text>
  </g>
</svg>

解释：

- `<svg>` 标签定义一个SVG图形区域。
- `<g>` 标签用于组合多个SVG元素。
- `<path>` 标签定义一个路径，`d` 属性表示路径的形状，`stroke` 属性表示路径的颜色，`stroke-width` 属性表示路径的宽度。
- `<circle>` 标签定义一个圆，`cx` 属性表示圆心的x坐标，`cy` 属性表示圆心的y坐标，`r` 属性表示圆的半径，`fill` 属性表示圆的填充颜色。
- `<text>` 标签定义一个文本，`x` 属性表示文本的起始x坐标，`y` 属性表示文本的起始y坐标，`font-size` 属性表示文本的字号，`font-weight` 属性表示文本的粗细程度。

效果如下：


当鼠标移入检测点时，可以通过JavaScript实现tip提示。代码如下：

<svg width="600" height="200">
  <g>
    <!--第一段铁轨-->
    <path d="M50,100 L500,100" stroke="black" stroke-width="10" />
    <!--第一段检测点-->
    <circle cx="150" cy="100" r="10" fill="red" onmouseover="showTip('检测点1')" onmouseout="hideTip()" />
    <text x="155" y="100" font-size="16" font-weight="bold">检测点1</text>
    <circle cx="350" cy="100" r="10" fill="red" onmouseover="showTip('检测点2')" onmouseout="hideTip()" />
    <text x="355" y="100" font-size="16" font-weight="bold">检测点2</text>
  </g>
  <g>
    <!--第二段铁轨-->
    <path d="M50,150 L500,150" stroke="black" stroke-width="10" />
    <!--第二段检测点-->
    <circle cx="250" cy="150" r="10" fill="red" onmouseover="showTip('检测点3')" onmouseout="hideTip()" />
    <text x="255" y="150" font-size="16" font-weight="bold">检测点3</text>
  </g>
</svg>

<script>
  var tip = document.createElement('div');
  tip.style.position = 'absolute';
  tip.style.background = 'white';
  tip.style.border = '1px solid black';
  tip.style.padding = '5px';
  tip.style.display = 'none';
  document.body.appendChild(tip);

  function showTip(text) {
    tip.innerHTML = text;
    tip.style.display = 'block';
  }

  function hideTip() {
    tip.style.display = 'none';
  }
</script>

解释：

- `onmouseover` 属性表示当鼠标移入元素时触发的事件。
- `onmouseout` 属性表示当鼠标移出元素时触发的事件。
- `showTip()` 函数用于显示提示框，接受一个参数表示提示框的文本内容。
- `hideTip()` 函数用于隐藏提示框。
- `document.createElement()` 函数用于创建一个新的HTML元素。
- `document.body.appendChild()` 函数用于将元素添加到文档中。
- `tip.style` 属性用于设置提示框的样式，包括位置、背景、边框、内边距和显示状态。
- `tip.innerHTML` 属性用于设置提示框的文本内容。

效果如下：