<!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. leetcode 108

    二分法建立二叉树,每次把左半部分作为左子树右半部分作为右子树,递归建立BST. #include<bits/stdc++.h> using namespace std; /** * Def ...

  2. JAVA编程思想学习笔记7-chap19-21-斗之气7段

    1.枚举 2.内置三种注解 @Override @Deprecated @SuppressWarnings 3.元注解:用于注解其它注解 4.注解处理器:通过反射 5.创建线程的两种方式 实现Runn ...

  3. selenium PO模式

    思想: 1.定义basepage.py用来写公共方法,比如找元素,打开url,切换frame.这样的部分都写在这里.不必每次用都重写. 2.LoginPage.py 每个功能模块一个文件或者一个类 这 ...

  4. 关于double精确度的简单问题

    (1)测试TestDouble.java结果 结果:如图,使用double类型的数据进行运算时结果是不准确的. 原因:double类型的数值占用64bit,即64个二进制数,除去最高位表示正负符号的位 ...

  5. react native中使用ScrollableTabView

    第一步,下载依赖 npm install react-native-scrollable-tab-view --save 第二步,引入 import ScrollableTabView, { Scro ...

  6. javaweb防止表单重新提交

    一.前台验证 1.首先在from表单加一个隐藏域字段,设值为true.例如: <input type="hideen" name="tokenFlag" ...

  7. 谈谈html中一些比较"偏门"的知识(map&area；iframe；label)

    说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象.也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素. 常见的有:<br>,< ...

  8. html5-select和datalist元素

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. D Tree Requests dfs+二分 D Pig and Palindromes -dp

    D time limit per test 2 seconds memory limit per test 256 megabytes input standard input output stan ...

  10. skynet 报错 skynet 服务缺陷 Lua死循环

    我的报错如下: 看起来是skynet中lua死循环,实际上,可能只是本地配置出了问题,比如,我的数据库连接不上了,因为我把别人的配置更新到我本地了,吗,mysql秘密不对 解决办法就是将配置文件中的, ...