jq svg 修改image的xmlns:xlink及图片的显隐

最新推荐文章于 2023-04-20 22:09:00 发布

美力

最新推荐文章于 2023-04-20 22:09:00 发布

阅读量3.5k

点赞数

分类专栏： svg 文章标签： svg

本文链接：https://blog.csdn.net/zhaozhenzhen817/article/details/78782495

版权

svg 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-1.10.2.min.js"></script>
    <style>
        #fengji, #cdc, #zwxd, #tsb1, #tsb2 {
            display: none;
        }
    </style>
</head>
<body>
<svg version="1.1" id="sketchpad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="80%" height="80%" viewBox="60 0 1100 570">
    <g>
        <image overflow="visible" width="2880" height="2000" xlink:href="dajingcun.png"
               transform="matrix(0.4246 0 0 0.3336 -4 -55.6528)">
        </image>
    </g>
    <!--绘制指示灯开始-->
    <g id="lempBox">
        <image id="fengji" x="285" y="370" width="15" height="15" xlink:href="run.gif"></image>
        <image id="cdc" x="707" y="315" width="15" height="15" xlink:href="run.gif"></image>
        <image id="zwxd" x="1027" y="385" width="15" height="15" xlink:href="run.gif"></image>
        <image id="tsb1" x="465" y="140" width="15" height="15" xlink:href="run.gif"></image>
        <image id="tsb2" x="485" y="145" width="15" height="15" xlink:href="run.gif"></image>
    </g>
    <!--绘制指示灯结束-->

    <!--绑定数据开始-->
    <g transform="translate(00 -15) ">
        <text x="195" y="165" fill="#082b59"
              style="font-family:微软雅黑;font-weight:bolder;font-size:8px;text-anchor: end;">Q=
        </text>
        <text x="255" y="165" fill="#082b59" style="font-family:微软雅黑;font-weight:bolder;font-size:9px;">m³/h</text>
        <text x="248" y="165" fill="#082b59" style="font-family:微软雅黑;font-weight:bolder;font-size:8px;text-anchor: end;"
              id="JSSSLL">暂无数据
        </text>
        <rect width="50" height="15" x="200" y="155" style="fill:transparent;stroke-width:1;stroke:#002e73;"></rect>
    </g>

    <!--绑定数据结束-->
</svg>
<script>
    function judgeSta(data, id) {
        if (data != undefined) {
            $("#" + id).css("display", "block");//设置元素的显隐
            var lempBox = document.getElementById(id);
            if (data.RunStatus == "1.0") {
                lempBox.href.baseVal = "run.gif";//修改image的图片
            }
            if (data.RunStatus == "0.0") {
                lempBox.href.baseVal = "stop.gif";
            }
            if (data.ErrorStatus == "1.0") {
                lempBox.href.baseVal = "alarm.gif";
            }
        }
    }
    searchData();
    function searchData() {
        var data = {
            "code": 200,
            "success": true,
            "message": "findDeviceRealTimeInfo success",
            "data": {
                "shebe1": {"Flow": "0.03", "dataTime": "1513063954727", "deviceId": "1025"},
                "shebe2": {
                    "RunStatus": "1.0",
                    "AutoStatus": "0.0",
                    "ErrorStatus": "0.0",
                    "dataTime": "1513063954727",
                    "deviceId": "1024"
                },
                "shebe3": {
                    "AutoState": "1.0",
                    "RunStatus": "1.0",
                    "ErrorStatus": "0.0",
                    "dataTime": "1513063954724",
                    "deviceId": "1019"
                },
                "shebe4": {
                    "dataTime": "1513063954725",
                    "AutoState": "0.0",
                    "RunStatus": "0.0",
                    "ErrorStatus": "0.0",
                    "deviceId": "1020"
                },
                "shebe5": {
                    "AutoState": "1.0",
                    "RunStatus": "0.0",
                    "dataTime": "1513063954723",
                    "ErrorStatus": "0.0",
                    "deviceId": "1017"
                },
                "shebe6": {
                    "ErrorStatus": "0.0",
                    "dataTime": "1513063954724",
                    "RunStatus": "0.0",
                    "AutoState": "0.0",
                    "deviceId": "1018"
                }
            }
        };
        var JSSSLL = document.getElementById("JSSSLL");//进水瞬时流量
        if (data.data.shebe1 != undefined) {
            if (data.data.shebe1.Flow != undefined || data.data.shebe1.Flow != null) {
                JSSSLL.textContent= parseFloat(data.data.shebe1.Flow).toFixed(2);// 文本框赋值
            }
        }
        judgeSta(data.data.shebe3, "fengji");
        judgeSta(data.data.shebe4, "cdc");
        judgeSta(data.data.shebe2, "zwxd");
        judgeSta(data.data.shebe5, "tsb1");
        judgeSta(data.data.shebe6, "tsb2");

    }

</script>
</body>
</html>

美力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq svg 修改image的xmlns:xlink及图片的显隐

html>html>head lang="en"> meta charset="UTF-8"> title>title> script src="../jquery-1.10.2.min.js">script> style> #fengji, #cdc, #zwxd, #tsb1, #tsb2 { display: non
复制链接

扫一扫