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: 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³/htext>
        <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>

你可能感兴趣的:(svg)