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

最新推荐文章于 2024-05-25 14:18:20 发布

程梦真

最新推荐文章于 2024-05-25 14:18:20 发布

阅读量3.2k

点赞数

分类专栏： H5 JS 文章标签： php svg h5

本文链接：https://blog.csdn.net/u011168565/article/details/52795175

版权

JS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

关于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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于H5标签SVG的了解和说明，以及svg.js库的使用

关于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/javascri
复制链接

扫一扫

专栏目录