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

<!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>

jq svg 修改image的xmlns:xlink及图片的显隐的更多相关文章

ios 修改导航栏返回按钮的图片
修改导航栏返回按钮的图片方法1: [UINavigationBar appearance].backIndicatorTransitionMaskImage = [UIImage imageName ...
JQ无法修改input的type属性的替代解决方法
需要实现的效果:一个输入框,当输入框未获得焦点的时候,显示为 “请输入密码”:当输入内容并失去焦点的时候,输入内容显示为”*****”,如果没有输入仍然显示“请输入密码”: 方法一:使用text,隐藏 ...
JQ 动态修改/替换某个节点的内容
<div class="box">我们定位于中国心理行业第一<div> $(".box").html($(".box&quo ...
jQ处理页面中尺寸过大的图片
这是一个非常实用的功能,在网页里难免会出现一些尺寸过大的图片,会将页面撑开或者图片被部分隐藏,我们通常会用css的max-width来加以控制,但ie6却不吃这套.我在做一个站时,就遇到这种困惑,因 ...
Oracle修改时间报:ORA-01830: 日期格式图片在转换整个输入字符串之前结束的解决办法
1.错误原因: date类型不能包含秒以后的精度. 如日期:2010-01-01 20:02:20.0 解决方法:将日期秒以后的精度去除, to_date(substr(INVOICE_DATE,1, ...
JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效
今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图 ...
【转】Jquery修改image的src属性，图片不加载问题
1.当点击某一按钮的时候,把图片域中的图片改变一下 <img id="randimg" src="/servlet/CreateValidateNum&quo ...
Android系统移植与调试之------->如何修改Android设备的桌面背景图片
1.切换到~/mx0831-0525/device/other/TBDG1073/overlay/frameworks/base/core/res/res目录 2.准备好一张相应尺寸的图片并且命名为d ...

随机推荐

MySQL--8MySQL存储过程小结
CURD: 就是对数据表进行插入更新删除查找的操作. 预编译:第一次会分析语法是否正确,编译成可识别的命令.然后存在内存中,以后再调用就省去了这两步,效率变高. 第一点:在存储过程内可以写控制语句,可 ...
Http 服务简单示例
现在我们实现一个GO的Web http服务只做演示,没有实际功能但是能看出Go做Http服务的简洁 **************************************** package ...
项目遇到的css样式
1. 这种怎么写?用radio,我这里用的时element的radio <div class="menu"> <span>我的粉丝({{totalNumbe ...
mybatis运行原理
mybatis运行原理运行过程中涉及到的类或者接口 Resources(c) :用于加载mybatis核心配置文件 XMLConfigBuilder(c) :用于解析xml文件(核心配置文件) Co ...
gitlab4.0_安装
一,安装环境 OS:redhat7.4 二,安装依赖包 yum -y groupinstall 'Development Tools' ===>待验证 yum -y install pytho ...
Nginx查看并发链接数
一.通过界面查看通过web界面查看时Nginx需要开启status模块,也就是安装Nginx时加上 --with-http_stub_status_module 一.通过界面查看通过web界面查看时 ...
Bootstrap-全局样式的文本颜色和背景颜色
.text-五种颜色文本颜色.text-info文本浅蓝颜色-提示.text-warning文本黄色-警告颜色.text-success文本绿色-成功颜色.text-primary文本深蓝色-警 ...
memory consistency
目前的计算机系统中,都是shared memory结构,提供统一的控制接口给软件, shared memory结构中,为了memory correctness,可以将问题分为:memory consi ...
linux小倒腾
1.vim安装,sudo apt-get install vim-gtk,于是vim就安装好了.当然在我电脑上还出现了gvim,简单的vim配置(etc/vim/vimrc): "我的设置 ...
maven build 的时候,卡死在Downloading metadata的解决方法
[INFO] [INFO] ------------------------------------------------------------------------ [INFO] Buildi ...

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

jq svg 修改image的xmlns:xlink及图片的显隐的更多相关文章

随机推荐

热门专题