<!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. 判断一个url是否是图片

    public bool RemoteFileExists(string fileUrl) { bool result = false;//下载结果 WebResponse response = nul ...

  2. VUE中过了一遍还不熟悉的东西

    1.computed/watch/和methods computed是依赖于数据来变动的,有缓存,当不需要缓存的时候就用方法,watch不建议乱用,当有异步请求的时候就用watch 写法一样 2.wa ...

  3. js判断手机是安卓还是ios

    //点击下载按钮判断appDown() { var u = navigator.userAgent; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac O ...

  4. sqli-labs(十八)

    第五十五关:和上一关类似,只是拼凑的方法不一样,所以需要先判断后台是怎么拼凑的 分别输入id=1'--+         id=1"--+             id=') --+     ...

  5. JavaScript原型继承的实例

    // 创建构造函数实例(获取DOM节点) <div id="app">测试字符</div>

  6. 基于AOP注解实现业务功能的动态配置

    一.导入jar包 <dependency><!-- 4.引入AOP--> <groupId>org.springframework.boot</groupId ...

  7. rpgmakermv(8) XY_TitleMenu插件

    插件作用:设置标题 /*: * @plugindesc v1.00 Display Multiple Menu in Title Screen. * @author XueYu Plugins * * ...

  8. U盘自动拷贝

    描述:启动该程序后,自动检测U盘是否存在,若存在,将U盘中所有的文件拷贝到电脑的指定目录下. 注:本篇博文仅支持技术讨论,不用于数据的盗取之类的黑科技. 本程序基于Win32开发,主要是利用Win32 ...

  9. Spark学习之路 （二十八）分布式图计算系统

    一.引言 在了解GraphX之前,需要先了解关于通用的分布式图计算框架的两个常见问题:图存储模式和图计算模式. 二.图存储模式 巨型图的存储总体上有边分割和点分割两种存储方式.2013年,GraphL ...

  10. 使用yaml+groovy实现Java代码可配置化

    背景与目标 在使用函数接口和枚举实现配置式编程(Java与Scala实现),使用了函数接口和枚举实现了配置式编程.读者可先阅读此文,再来阅读本文. 有时,需要将一些业务逻辑,使用配置化的方式抽离出来, ...