vue+svg实现按等级缩放的路线组件

1.先看效果

 a.这个是一级效果

b.二级效果

2.代码实现

a.完整代码示例

<template>
  <div>
    <div class="route-preview" :style="{ ...styleExternalIcon }">
      <!-- <div style="margin-top: -20px;float: left;white-space: nowrap;margin-right:4px;">{
  { tunnelEnterance }}
      </div> -->
      <div style="margin-top: -20px;float: left;margin-right:4px; min-width: 80px; max-width: 80px; word-break: break-word; white-space: normal;max-height: 60px;">{
  { tunnelEnterance }}</div>

      <!-- <div class="road-name">康护理大道</div> -->
      <div class="legend" ref="legendContainer">
        <svg ref="svgElement" :width="tunnelWidth" :key="this.key" :height="60" style="margin-bottom: -8px;">
          <defs>
        <pattern id="image" x="0" y="0" width="100%" height="100%">
          <image
            x="0"
            y="0"
            :width="localLineLength"
            :height="lineHeight"
            href="../../assets/crop/tunnelWire.png"
            preserveAspectRatio="none"
          />
        </pattern>
      </defs>

      <!-- 使用图案填充矩形 -->
      <rect x="0" y="20" :width="localLineLength" :height="lineHeight" fill="url(#image)" />
          <!-- 绘制蓝色覆盖区域 -->
          <template v-for="(item, index) in this.tempList">
            <rect v-if="item.endStation >= item.startStation" :x="scaleValue3(item.startStation,item.startCode)" :y="20"
              :width="scaleValue3(item.endStation,item.endCode) - scaleValue3(item.startStation,item.startCode)" :height="lineHeight" fill="#9b99f9"
              :key="'rect1-' + index" />
            <rect v-else :x="scaleValue3(item.endStation,item.endCode)" :y="20"
              :width="scaleValue3(item.startStation,item.startCode) - scaleValue3(item.endStation,item.endCode)" :height="lineHeight" fill="#000080"
              :key="'rect-' + index" />
          </template>
          <!-- 绘制圆形节点 -->
          <image v-for="(node, index) in nodes" :key="'image-no' + index" :x="scaleValue(node.cx)"
            :y="lineHeight / 1 - nodeRadius + 16" :width="nodeRadius * 2"
            xlink:href="../../assets/crop/pointWhite.png" />
          <image v-for="(node, index) in nodes" :key="'image-' + index" v-if="isNodeInCoverage(node)"
            :x="scaleValue(node.cx)" :y="lineHeight / 1 - nodeRadius + 16" :width="nodeRadius * 2"
             xlink:href="../../assets/crop/pointPurple.png" />
          <!-- 告警节点 -->
          <!-- <image style="cursor: pointer;" v-for="(node, index) in alarmNodes" :key="'image1-' + index"
            v-if="node.type == 0" @click="openAlarmInfo(node.id)" :x="scaleValue3(node.cx,node.code) - nodeRadius"
            :y="lineHeight / 1 - nodeRadius + 16" :width="nodeRadius * 2" :height="nodeRadius * 2"
            xlink:href="../../assets/crop/pointYellow.png" />
          <image style="cursor: pointer;" v-for="(node, index) in alarmNodes" :key="'image2-' + index"
            @click="openAlarmInfo(node.id)" v-if="node.type == 1&