在工业信息化系统里，常常需要动态呈现系统的数据在一张示意图里，用于展现系统状态，分析结果等。这样用JavaScript操作svg 元素就有现实意义。本人近期做了一些实践，现分享一下。
需求：
你下面这样一张示意图。
A1至A8，分别用显示各个检测或控制点状态，不同状态显示不同颜色。后端技术不是本文讨论重点，前端技术才是本文讨论重点。前端用H5来实现。
方案：
一、先将该示意图导出成svg格式的文件。例如”用Viso 绘图，然后导出成svg文件“。
二、在浏览器中打开svg文件，查看源码，拷贝svg元素内容。粘贴到你的JS的IDE环境中，用于前端开发。
三 、在IDE里书写你的代码，控制你要实现在逻辑。
1、 清除在style 标记里<![CDATA[]]这样符号，因为它会导致你的JS无法找到你要变色的元素。
2、 接下来要判断浏览器是否支持HTML5
3、 IE比较特殊，不支持动画元素。所以判断浏览器是否支持IE
//判断是否是IE function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) return true; // alert("IE"); else return false; //alert("NOT IE"); } 4、 在<svg>内部加入如下代码，具体含义看备注
//在svg 标记的onload事件中已经设置了SetTagDisplay function SetTagDisplay() { if (isIE()) { //如果是IE使用ieSetColor方法，每隔一秒闪一次 window.setInterval(ieSetColor, 1000); } else { //不是的话，可方便了，遍历标记，查找标记，为标记添加动画元素，就可以了。 for (var i = 0; i < jsn.length; i++) { var TagName = jsn[i].Tag; var TagColor = jsn[i].Color; var sdy = document.createElementNS("http://www.w3.org/2000/svg", "animate"); //创建元素 sdy.setAttribute("attributeName", "fill"); //动画变化属性fill，填充颜色 sdy.setAttribute("attributeType", "CSS"); sdy.setAttribute("from", "#ffffff"); //从白色开始 sdy.setAttribute("to", TagColor);//变成它的 sdy.setAttribute("begin", "1s"); sdy.setAttribute("dur", "2s"); sdy.setAttribute("repeatCount", "indefinite"); document.querySelector("#"+TagName).setAttribute("visibility","visible"); //网上流传很多方法，如：evt.target.ownerDocument; svgDoc.rootElement;这些都不可用。 document.querySelector("#"+TagName).appendChild(sdy); } } } function ieSetColor() { //IE浏览器效果 for (var i = 0; i < jsn.length; i++) { var TagName = jsn[i].Tag; var colorInfo = jsn[i].Color; var varRect = document.querySelector("#" + TagName); varRect.setAttribute("visibility","visible"); varRect.setAttribute("class", ""); //必须动态清除原有class 否则展现不出来效果。 varRect.setAttribute("stroke","#ebeff5"); varRect.setAttribute("stroke-width","0.75"); //动态设置边框 var colorSet = varRect.getAttribute("fill"); if (colorSet == colorInfo) { varRect.setAttribute("fill", "#ffffff"); } else { varRect.setAttribute("fill", colorInfo); } } } ]]> 注意事项：
1、可以将样式移入css 文件，与普通css文件一样，不需要加CDATA。引入样入文件与用 <link href="svgTest.css" type="text/css" rel="stylesheet"/>
（网上流传其它方式引入样式文件，经实践都是不可用的。）
2、手动清除要实现效果元素的上样式（如：rect的class="st1"。或在函数内动态清除（ varRect.setAttribute("class", ""),否则无法显示动态效果
3、注意颜色f要小写,JS大小写敏感。
4、操作svg的js代码要写在svg标内。用<script ><![CDATA[ ]]></script>包裹。svg外部定义的变量，函数，svg内部的代码可以访问，调用。
全部代码如下:
最后实现效果
Chrome的效果好，过度平滑。
原码下载：
下载解压后，立刻看到效果: