vue 放大缩小 svg 图形（原理类似整个列表更新）

原料 ：vue+element-ui+svg

目的：让svg 图形在点击按钮后放大和缩小

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： 需要绘制的站台
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);//同时更新站台信息，才会更新页面
    },
    draw(pointArray,factor){//根据变化倍数更新svg的坐标
      var newPointArray = [];
      for(var i=0;i<pointArray.length;i++){//所有坐标都乘以系数，就可完成放大
        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的数据列表，页面的数据是不会更新的。需要一起同时更新，才会更新页面数据

以下是不会更新页面的写法

   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
  }