<!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 动态添加元素与事件

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

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

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

  3. 后台动态添加的button,如何触发button_click事件?

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

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

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

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

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

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

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

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

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

  8. vue中v-bind:class动态添加class

    1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...

  9. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

随机推荐

  1. MySQL Database on Azure

    在国际版的Microsoft Azure上,MySQL服务是与ClearDB合作运营的.由于ClearDB无法在中国地区提供服务,因此微软中国的研发团队开发了专门面向中国市场的MySQL Databa ...

  2. SQL SERVER 拆分列为多行

    --创建测试表 )) insert into #temp(names) values('张三,李四'), ('中国,美国,巴西'), ('深圳,上海,北京,广州,哈尔滨'), ('足球,篮球,乒乓球, ...

  3. IP地址的存储和使用

    ip地址使用int类型存储,用INET_NTOA()和INET_ATON()转换 mysql'),inet_aton('127.0.0.1'); +-------------------------+ ...

  4. AR9331中Linux内核启动中与IRQ中断相关的文件

    先列出框架,具体后继再来分析. 首先是lds文件,该文件设置了各个section在FLASH或RAM中的先后顺序. 位于~/openwrt1407/build_dir/target-mips_34kc ...

  5. Nginx之旅系列 - Nginx日志功能 PK Linux内核printk

    题记:Nginx之旅系列是用来记录Nginx从使用到源码学习的点点滴滴,分享学习Nginx的快乐 Nginx 首页: http://nginx.org/ Nginx日志功能 PK Linux内核pri ...

  6. mac 切换php版本

    通过brew安装的php可以通过brew link和brew unlink来切换不同版本 #brew list #brew unlink php56 #brew link php55

  7. java多线程并发编程

    Executor框架 Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括线程池,Executor,Executors,ExecutorService ...

  8. winows 服务器环境搭建 (碰到了windows服务器,小记一下吧~)

    1.连接远程服务器  安装wamp 2.查看wamp 默认端口号是否与对应windows 服务器冲突,如果冲突,则改之 WAMP装好之后默认的端口是80,但是这个80端口呢,可以热门端口啊,迅雷,II ...

  9. error C2143: syntax error : missing &#39;;&#39; before &#39;type&#39;

    许久之前,就想看看C和C++,看看这两种神奇的编程语言,但是一直被这样或者那样的琐事给耽搁了(狂喷自己的拖延症). 今天翻开自己的移动硬盘找到一本古老的书籍:<The C Programming ...

  10. KMeans实现

    KMeans实现 符号 \(K\): 聚类的个数 \(x^{(i)}\): 第i个样本 \(\mu_{1},\mu_{2},...\mu_{K}\): K个中心节点 \(c^{(i)}\): 第i个样 ...