vue使用svg文件补充-svg放大缩小（使用d3.js）

前言

项目需求是要引入svg文件，然后对里面的元素进行赋值，完了之后还要能够让svg放大缩小，点击查看全屏。针对上一篇文章，进行对svg文件里面的元素进行赋值和放大缩小的补充笔记

svg元素赋值

1. 先看看svg文件的代码

思路：我的想法就是循环拿到里面的id，然后跟后台的数据匹配，然后赋值。因为后台返回的数据id是没有后面的_C和_V 的。所以需要我前端的处理。

2. 前端js代码：

 onWinResize(item) { // item是后台返回的数据，我数据处理函数是单独写的，没有放在接口请求后面
            var svg = document.getElementById('svgcanvas'); // svg 的id
            var arrText = []; 
            var arrRect = []; //这两个是我们要赋值和要改变颜色的数组
            for (var i = 0; i < svg.childNodes.length; i++) {
                var child = svg.childNodes[i]; // 循环svg里面的元素
                if (child.tagName == 'g' && child.id != null && child.id.length > 0) { // 找到g元素，然后循环g里面的元素。（如果你的svg里面没有用g元素包裹你的te