原料 ：vue+element-ui+svg

目的：讓svg 圖形在點(diǎn)擊按鈕后放大和縮小

html

  <template>
    <div class="svg-map">
        <div>
            <el-button type="primary" icon="el-icon-plus" circle v-on:click="zoomin()"></el-button>
            <el-button type="success" icon="el-icon-minus" circle v-on:click="zoomout()"></el-button>
        </div>
        <div>
          <svg view-box="0 0 700 800" width="100%" height="800" v-on:mousemove="dragSVG()">
              <rect v-for="station in stations" :key="station.index" :x="station.x" :y="station.y" :width="station.w" :height="station.h" 
              style="fill:#7daf7d;stroke:#b5acac;stroke-width:2"/>
              <text>1</text>
          </svg>
        </div>
    </div>
</template>

script

//stations： 需要繪制的站臺(tái)
export default {
  name: 'svgMap',
  data() {
    return {
      stations:[ {num:1,x:50,y:20,w:20,h:40},{x:75,y:20,w:20,h:40},{x:100,y:20,w:20,h:40},
                {x:125,y:20,w:20,h:40},{x:150,y:20,w:20,h:40},{x:175,y:20,w:20,h:40},
                {x:200,y:20,w:20,h:40},{x:225,y:20,w:20,h:40}]
    }
  },
  methods: {
    zoomin(){//放大
      this.stations = this.draw(this.stations,1.1);
    },
    zoomout(){//縮小
      this.stations = this.draw(this.stations,0.9);//同時(shí)更新站臺(tái)信息议经，才會(huì)更新頁(yè)面
    },
    draw(pointArray,factor){//根據(jù)變化倍數(shù)更新svg的坐標(biāo)
      var newPointArray = [];
      for(var i=0;i<pointArray.length;i++){//所有坐標(biāo)都乘以系數(shù)，就可完成放大
        var point = {};
        point.x = pointArray[i].x*factor;
        point.y = pointArray[i].y*factor;
        point.w = pointArray[i].w*factor;
        point.h = pointArray[i].h*factor;
        newPointArray.push(point);
      }
      return newPointArray;
    }
  }
}

注意
直接更新vue的數(shù)據(jù)列表肿轨，頁(yè)面的數(shù)據(jù)是不會(huì)更新的茧球。需要一起同時(shí)更新便监，才會(huì)更新頁(yè)面數(shù)據(jù)

以下是不會(huì)更新頁(yè)面的寫法

   for(var i=0;i<this.stations.length;i++){
    this.stations[i].x = this.station[i].x*factor
    this.stations[i].y = this.station[i].y*factor
    this.stations[i].w = this.station[i].w*factor
    this.stations[i].h = this.station[i].h*factor
  }