原创HTML5：JS操作SVG实践体会
在⼯业信息化系统⾥，常常需要动态呈现系统的数据在⼀张⽰意图⾥，⽤于展现系统状态，分析结果等。这样⽤JavaScript操作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 {
}
catch (e) {
}
</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 = ateElementNS("/2000/svg", "animate"); //创建元素
sdy.setAttribute("attributeName", "fill"); //动画变化属性fill，填充颜⾊
sdy.setAttribute("attributeType", "CSS");
sdy.setAttribute("from", "#ffffff"); //从⽩⾊开始
svg canvas
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;
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 = Attribute("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内部的代码可以访问，调⽤。
全部代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//判断浏览器是否⽀持HTML5
try {
}
catch (e) {
}
//判断是否是IE
function isIE() { //ie?
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true; // alert("IE");
else
return false; //alert("NOT IE");
}
</script>
<svg xmlns="/2000/svg" xmlns:xlink="/1999/xlink" xmlns:ev="/2001/xml-events"
xmlns:v="schemas.microsoft/visio/2003/SVGExtensions/" width="11.6929in" height="8.26772in"
viewBox="0 0 841.89 595.276" xml:space="preserve" color-interpolation-filters="sRGB" class="st9" onload="SetTagDisplay()">
<script ><![CDATA[
//已请求服务获取Json串，Json串排序处理，根据Value，算出动画颜⾊得到如下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"}]; //注意颜⾊f要⼩写,js⼤⼩敏感。 JS获得到的颜⾊都是⼩写f
function SetTagDisplay() {
if (isIE()) {
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 = ateElementNS("/2000/svg", "animate");
sdy.setAttribute("attributeName", "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");
document.querySelector("#"+TagName).appendChild(sdy);
}
}
}
function ieSetColor() { //IE浏览器效果
for (var i = 0; i < jsn.length; i++) {
var TagName = jsn[i].Tag;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论