<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>流程图 BZ08_M</title>

</head>

<style>

    input{

        margin: 10px;

    }

</style>

<body>

<div>

    <input value="A1" type="checkbox">

    <input value="A2" type="checkbox">

    <input value="A3" type="checkbox">

    <input value="A4" type="checkbox">

    <input value="A5" type="checkbox">

</div>

<div style="width: 600px;height: 500px;border: 1px solid black;">

   <!-- preserveAspectRatio="xMinYMin meet"  viewBox="-67,0,1400,800" 根据窗口大小自动收缩图像-->

        <svg id="sketchpad" width="600" height="500" preserveAspectRatio="xMinYMin meet"  viewBox="0,0,450,450"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

        <g>

            <image x="0" y="0" width="510" height="300" xlink:href="flowCharts.jpg" />

        </g>

    </svg>

</div>

<script src="jquery-1.10.2.min.js"></script>

<script>

    var inputs = $("input");

    $("input").bind("click",function () {

        var id=$(this).val();

        if (this.checked == true) {

            // (Math.random()*(max-min)+min);

            var num1 = parseInt(Math.random() * 500);

            var num2 = parseInt(Math.random() * 300);

            var xmlns = "http://www.w3.org/2000/svg";

            var tsvg_obj = document.getElementById("sketchpad");

            var svg_img = document.createElementNS(xmlns, "image");

            svg_img.href.baseVal = "People.bmp";

            svg_img.setAttributeNS(null, "id", id);

            svg_img.setAttributeNS(null, "class", "SVGpeople");

            svg_img.setAttributeNS(null, "height", "25px");

            svg_img.setAttributeNS(null, "width", "25px");

            svg_img.setAttributeNS(null, "x", num1);

            svg_img.setAttributeNS(null, "y", num2);

            tsvg_obj.appendChild(svg_img);

        }else{

            $("#"+id).remove();

        }

    });

</script>

<!--<script src="svgperson.js"></script>-->

</body>

</html>

svg动态添加小人的更多相关文章

  1. svg web拓扑更新了，支持动态添加svg组件

    版本1.0请点此 预览地址 https://svg.yaolunmao.top 如何使用 # 克隆项目 git clone https://github.com/yaolunmao/vue-webto ...

  2. SVG 动态添加元素与事件

    SVG文件是由各个元素组成.元素由标签定义,而标签格式即html的元素定义格式.但是载入一个SVG文件,却无法通过常规的js获取对象方式来获取到SVG中定义的元素,更无法通过这种方式来动态添加SVG元 ...

  3. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. js动态添加事件-事件委托

    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  5. 后台动态添加的button，如何触发button_click事件？

    后台动态添加的button,需要在Page_Load或者Page_Init重新动态生成才能执行button_click public Panel GetContrlType() { Panel pan ...

  6. jquery动态添加的html，第三方插件无法生效的情况

    今天一个问题纠结了半天,问题如下图  问题大致就是如上,新增的内容死活点不起,插件没有生效,在一个装逼前端群里面问,给我的答案是叫我去了解事件委托,了解一下事件冒泡!! 好吧,我一上午加半个下午的时间 ...

  7. 【Java EE 学习 75 下】【数据采集系统第七天】【二进制运算实现权限管理】【使用反射初始化权限表】【权限捕获拦截器动态添加权限】

    一.使用反射动态添加权限 在该系统中,我使用struts2的时候非常规范,访问的Action的形式都是"ActionClassName_MethodName.action?参数列表" ...

  8. Hadoop学习笔记—13.分布式集群中节点的动态添加与下架

    开篇:在本笔记系列的第一篇中,我们介绍了如何搭建伪分布与分布模式的Hadoop集群.现在,我们来了解一下在一个Hadoop分布式集群中,如何动态(不关机且正在运行的情况下)地添加一个Hadoop节点与 ...

  9. Net作业调度(五)—quartz.net动态添加job设计

    介绍 在实际项目使用中quartz.net中,都希望有一个管理界面可以动态添加job,而避免每次都要上线发布. 也看到有园子的同学问过.这里就介绍下实现动态添加job的几种方式, 也是二次开发的核心模 ...

随机推荐

  1. 启动软件丢失 MSVCR100.dll 系列，缺少库的问题

    做安装包时,Installshield2015工具,里可以添加需要的库. 不然需要自己一个个处理. 参考链接:https://zhidao.baidu.com/question/338311071.h ...

  2. Linux 配置yum源.

    Linux 配置yum源. 环境:虚拟机中安装了RedHat ,在进行安装mariadb的时候,出现如下错误.是因为yum源的问题,需要进行配置yum源.本教程是配置本地yum源. [root@loc ...

  3. 搭建私有仓库Harbor

    搭建Harbor企业级docker仓库   搭建Harbor企业级docker仓库 一.Harbor简介 1.Harbor介绍 Harbor是一个用于存储和分发Docker镜像的企业级Registry ...

  4. .net中ashx文件有什么用？功能有那些，一般用在什么情况下？

    .ashx是“一般处理文件”.和aspx类似.但是这种文件要比aspx这种前台页面文件内容简单轻巧..ashx不提供前台展示的功能.也可以说它结合了.cs类文件而且又可以提供给.aspx文件做UI层的 ...

  5. java.lang.ClassNotFoundException: org.hibernate.engine.FilterDefinition的解决方案

    今天在GitHub上面看到一个有意思的项目,下载下来,使用tomcat部署失败,出现异常,网上说JDK版本太高,改低,还是失败. 由于本人有个习惯,更喜欢把项目直接放入tomcat webapps 里 ...

  6. caffe中的caffemodel参数提取方法

    需要的文件为:deploy.prototxt caffemodel net = caffe.Net(deploy.txt,caffe_model,caffe.TEST)具体代码: import caf ...

  7. (1)打造简单OS-汇编写入引导区,虚拟机启动步骤

    首先需要您在网上下载NASM编译器,可以将汇编编译为二进制文件 1.写一段汇编代码在屏幕上打印一段字符,可以运行的!并进行nasm为二进制文件,如下"test.asm" 该段汇编主 ...

  8. linux命令-查找所有文件中包含某个字符串

    查找目录下的所有文件中是否含有某个字符串 find .|xargs grep -ri "IBM" 查找目录下的所有文件中是否含有某个字符串,并且只打印出文件名 find .|xar ...

  9. html5-文本属性

    /*p{color: red;width: 50%;text-align: center;background: blue;}p{text-align: end;}p{text-align: end; ...

  10. 设计模式之Mediator（中介者）（转）

    Mediator定义: 用一个中介对象来封装一系列关于对象交互行为. 为何使用Mediator? 各个对象之间的交互操作非常多;每个对象的行为操作都依赖彼此对方,修改一个对象的行为,同时会涉及到修改很 ...