前言
项目需求是要引入svg文件,然后对里面的元素进行赋值,完了之后还要能够让svg放大缩小,点击查看全屏。针对上一篇文章,进行对svg文件里面的元素进行赋值和放大缩小的补充笔记
svg元素赋值
- 先看看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