vue项目里面引用svg文件并给svg里面的元素赋值

<?xml version="1.0" encoding="utf-8"?>
这个是xml文件声明的，vue里面不能这样用，至于解释和原因，我也不懂，还是要进一步学习研究才知道了。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<img src="./line.svg" alt="">

<svg> 元素的 viewBox 属性非常重要，因为它定义了 SVG 的用户坐标系。简而言之，viewBox定义了用户空间的位置和维度以便于绘制 
SVG。（可以指定 SVG 图像的可见区域（viewPort））
viewBox 由四个数字组成，顺序需要保持一致 —— min-x,min-y,width,height

var el = document.getElementById('A1');
 el.innerHTML = '1024K'; //赋值
 el.attributes.fill.value = '#FF0000'; //改变svg里面的id为A1的元素的填充颜色（背景颜色）

<template>
 <div id="bodydv" class="bodydv">
 <div style="width:100%;padding:0px;margin:0px; height: 880px; ">
  <svg id="svgInfo" height="880" version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="2" stroke="#000000" style="width:100%">
  </svg>
 </div>
 </div>
</template>
 
<script>
 var strJson = unescape(this.scene.SceneTemp); //对escape() 编码的字符串进行解码。
var svg = document.getElementById('svgInfo'); //svg的id
svg.innerHTML = strJson; // svg里面的元素
var child;
 for (var i = 0; i < svg.childNodes.length; i++) {	//循坏svg里面的元素
 child = svg.childNodes[i];
 if (child.tagName == 'text' && child.id != null && child.id.length > 0) { // 判断是不是text元素，是的话，就进行赋值
 
 } 
 }
</script>

<svg id="svgInfo" height="880" version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="2" stroke="#000000" style="width:100%">
  <text transform="matrix(1 0 0 1 1110.543 530.8516)" fill="#F7F7F7" font-family="'MicrosoftYaHei'"
     font-size="14">1.00</text>
  <text transform="matrix(1 0 0 1 1111.0996 556.5186)" fill="#F7F7F7" font-family="'MicrosoftYaHei'"
     font-size="14">1.00</text>
  <text transform="matrix(1 0 0 1 1111.0996 582.1846)" fill="#F7F7F7" font-family="'MicrosoftYaHei'"
     font-size="14">1.00</text>
  <text transform="matrix(1 0 0 1 1111.0996 607.8516)" fill="#F7F7F7" font-family="'MicrosoftYaHei'"
     font-size="14">1.00</text>
 </svg>
 //如果svg里面，用 <g>，那么那个判断child.tagName == 'text' && child.id != null，不执行！
 <g>
  <line ></line>
  <rect x="121.228" y="65.5" fill="#0A750C" width="57.59" height="28" />
  <text id="A1" fill="#F7F7F7" font-family="'MicrosoftYaHei'" font-size="14">11.00</text>
 </g>
 ```