关于H5标签SVG的了解和说明，以及svg.js库的使用

来源：互联网发布：图形界面C语言编辑：程序博客网时间：2024/04/30 00:31

关于H5标签SVG的了解和说明，以及svg.js库的使用

php页面

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src=js/svg.js></script><script type="text/javascript" src=js/svg.min.js></script><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){     var draw = SVG('drawing').size(1134, 680);//  draw.text("你好").font({ family:'',size: 40});    $.getJSON("json/company_1.json",function(data){        $.each(data,function(i,item){            //考虑先画后画 后画的会覆盖先画的            var rect = draw.path(item['path']).attr({ fill: '#B7B4BC' ,stroke:'#000'});            var text = draw.text(item['name']).font({ family:'Microsoft YaHei',size: 16}).move(item['textX'],item['textY']);                rect.mouseover(function() {                this.attr({ fill: '#868191' });                this.transform({ scaleX : 1,scaleY : 1 });            });            rect.mouseout(function() {                 this.attr({ fill: '#B7B4BC' });                 this.transform({ scaleX : 1 ,scaleY : 1});            });        });        $.each(data,function(i,item){            var arr = item['door'];            $.each(arr,function(j,sub_item){                draw.path(sub_item['doorOpen']).attr({ stroke:'#000'}).stroke({ width: 2 });                draw.path(sub_item['doorClose']).attr({ stroke:'#B7B4BC'}).stroke({ width: 2 });            });        });    });     });</script><style type="text/css"> body{    text-align:center; /* /*   width: 1440px; */ *//* /*   height:900px; */ */ }</style></head><body><div id="drawing" style="margin-top:50px;"></div></body></html>

json文件

[{    "id":"ck",    "name":"仓库",    "path":"M3 5L3 327L271 327L271 5L3 5Z",    "textX":120,    "textY":165,    "door":[{"doorOpen":"M271 327L221 208","doorClose":"M271 327L271 190"}]},{    "id":"rjb",    "name":"软件部",    "path":"M567 5L567 327L271 327L271 5L567 5Z",    "textX":390,    "textY":166,    "door":[{"doorOpen":"M522 223L567 326","doorClose":"M567 207L567 327"}]},{    "id":"yjb",    "name":"硬件部",    "path":"M1129 5L567 5L567 145L1129 145L1129 5Z",    "textX":803,    "textY":72,    "door":[{"doorOpen":"M807 145L865 117","doorClose":"M878 145L878 145"},{"doorOpen":"M920 116L985 145","doorClose":"M984 145L807 145"}]},{    "id":"bgs",    "name":"办公室",    "path":"M1129 523L1129 145L567 145L567 523L1129 523Z",    "textX":800,    "textY":320,    "door":[]},{    "id":"wxb",    "name":"维修部",    "path":"M567 673L3 673L3 327L567 327L567 673Z",    "textX":226,    "textY":508,    "door":[{"doorOpen":"M567 327L527 436","doorClose":"M567 327L567 444"}]},{    "id":"zjlbgs",    "name":"总经理办公室",    "path":"M744 673L567 673L567 523L744 523L744 673Z",    "textX":595,    "textY":600,    "door":[{"doorOpen":"M744 523L678 547","doorClose":"M744 523L677 523"}]},{    "id":"cws",    "name":"财务室",    "path":"M909 673L744 673L744 523L909 523L909 673Z",    "textX":799,    "textY":600,    "door":[{"doorOpen":"M744 523L810 547","doorClose":"M811 523L744 523"}]},{    "id":"hys",    "name":"会议室",    "path":"M1129 673L909 673L909 523L1129 523L1129 673Z",    "textX":992,    "textY":600,    "door":[{"doorOpen":"M909 523L980 549","doorClose":"M909 523L989 523"}]}

]

0 0