JavaScript实现svg图片动态变色和文字修改
SVG图片使用的场景各有不同，本文主要讲的是在已有的SVG图上连接数据，动态的改变SVG图片的背景颜色和文字，用于传递不同的信息。
SVG介绍
以下引用w3school的介绍：
1、SVG 是使用 XML 来描述二维图形和绘图程序的语言。
2、什么是SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
** 3、SVG 的优势：**
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行SVG 是开放的标准
SVG 文件是纯粹的 XML
SVG嵌入html的方式
SVG嵌入html的方式有三种，通过标签<embed>、<object> 或者 <iframe>可以把SVG引入html。三者有区别，可以根据实际需求使用。按照是否允许使用脚本来分，<embed>和<iframe>可以使用脚本，而<object>不允许使用脚本，如果需要操作SVG的元素，那么推荐使用<embed>和<iframe>。
<embed> 标签被所有主流的浏览器支持，并允许使用脚本。直接在src放入SVG图片的路径即可。
<iframe> 标签可工作在大部分的浏览器。
<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。
本文使用的是<embed> 标签完成SVG的嵌入和后续操作。
处理SVG和html引入SVG
1、处理SVG图片
由于后续需要动态的修改SVG图片的元素的背景颜色和文字，因此需要先处理SVG图片，对需要修改部分的元素进行Id命名，方便后续获取到指定元素。推荐使用HBuilder和谷歌浏览器结合使用。
①、分别在两者中打开需要处理的SVG图片；
②、在谷歌浏览器通过控制台选中元素，找到需要处理的<g id='shape1-1'
③、在HBuilder打开的SVG图片中搜索shape1-1,找到包含在内的path标签，在这个标签上设置id；
④、同样的文字操作区域也是这样设置id
2、SVG嵌入
JavaScript修改SVG的元素属性
1、通过预设定的id获取SVG的元素
一般来说，由于SVG图片大小问题，存在加载慢的情况，直接去获取embed中的SVG获取不到，因此需要在window.onload=function(){}中获取。之后直接通过svg.getElementById()的方式就能获取到SVG中的元素。
2、修改元素的背景颜色
通过svg.getElementById()获取到元素，用setAttribute对'fill'进行设置颜色，即可改变元素的背景颜色。如果修改不生效，记得把path中的class样式去掉。
3、修改SVG中的文字
SVG的文字都是放在在text标签中，通过id获取到元素，不能使用value()、text()、html()的方式修改文字，需要使用textContent修改文字。
以上两种方式结合Ajax动态的修改，就能将数据展示到SVG中，适合做大屏显示。
其他说明
<iframe>标签也能进行脚本操作，不过最初学习的时候，资料找的不全，就没采用这个标签，现在回想起来是因为总是获取不到SVG对象，在写本文的时候查阅博客发现，<iframe>标签获取SVG对象时，同样需要等待SVG加载完成后，再去获取对象。