原创 HTML5：JS操作SVG实践体会

需求：

你下面这样一张示意图。

A1至A8，分别用显示各个检测或控制点状态，不同状态显示不同颜色。后端技术不是本文讨论重点，前端技术才是本文讨论重点。前端用H5来实现。

方案：

一、先将该示意图导出成svg格式的文件。例如”用Viso 绘图，然后导出成svg文件“。

二、在浏览器中打开svg文件，查看源码，拷贝svg元素内容。粘贴到你的JS的IDE环境中，用于前端开发。

三 、在IDE里书写你的代码，控制你要实现在逻辑。

1、               清除在style 标记里<![CDATA[]]这样符号，因为它会导致你的JS无法找到你要变色的元素。

<style type="text/css"> 
       .st1 {fill:url(#grad0-4);stroke:#4f87bb;stroke-width:0.75} 
   .st2 {fill:#4f87bb;font-family:黑体;font-size:1.00001em} 
   .st3 {font-family:Calibri;font-size:1em} 
   .st4 {fill:#4f87bb;font-family:黑体;font-size:0.833336em} 
   .st5 {marker-end:url(#mrkr4-22);stroke:#5b9bd5;stroke-linecap:round;stroke-linejoin:round;stroke-width:1} 
   .st6 {fill:#5b9bd5;fill-opacity:1;stroke:#5b9bd5;stroke-opacity:1;stroke-width:0.28409090909091} 
   .st7 {fill:#ffffff;stroke:#ebeff5;stroke-width:0.75} 
   .st8 {fill:#759fcc;font-family:Calibri;font-size:0.833336em} 
   .st9 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3} 
 
</style>

2、               接下来要判断浏览器是否支持HTML5

<script type="text/javascript"> 
    //判断浏览器是否支持HTML5 
    try { 
        document.createElement("canvas").getContext("2d"); 
    } 
    catch (e) { 
        document.getElementById("support").innerHTML = "<h3>你的浏览器不支持HTML5,请安装现代化的浏览器。我们推荐使用最新版的Chrome、 FireFox</h3>"; 
    } 
 
 </script>

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>内部加入如下代码，具体含义看备注

<script ><![CDATA[   //这个<![CDATA[不能省略 
//假设已请求服务获取Json串，根据配置获得到颜色值。如下列表。 
var jsn = [{"Tag": "A8", "Val": "12", "Color": "#ff0000"}, {"Tag": "A7", "Val": "11", "Color": "#ff3300"}, 
    {"Tag": "A3", "Val": "10", "Color": "#ff6600"}, 
    {"Tag": "A4", "Val": "9", "Color": "#ffcc00"}, 
    {"Tag": "A5", "Val": "9", "Color": "#ffff00"}, 
    {"Tag": "A6", "Val": "8", "Color": "#ff99cc"}, 
    {"Tag": "A2", "Val": "6", "Color": "#ffcccc"}, 
    {"Tag": "A1", "Val": "6", "Color": "#ffcccc"}]; 

//在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); 
        } 
    } 
} 
 
]]></script>

注意事项：

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的效果好，过度平滑。

原码下载：http://files.cnblogs.com/files/XPChen/svgLightSample2.zip
下载解压后，立刻看到效果: