<!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. python获取当前，昨天，明天时间

    import datetime nowTime = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')#现在 pastTimeMinutes = ...

  2. c#之课后习题

    1.折叠代码 #region 折叠内容#endregion 2.保留三位小数 using System; namespace _005_double保留3位小数 { class Program { s ...

  3. Android -- GreenDao3.2的简单使用

    1,最近看了一篇文章关于GreenDao的文章 ,感觉使用这个操作数据库还是很好用的,帮我们省了不少的查询代码,今天就和大家一起来简单的使用一下吧.首先这是官网地址:https://github.co ...

  4. oracle查询数据字典的sql

    使用的sql语句如下: select t1.username 用户, t2.TABLE_NAME 表名称, t3.comments 表业务含义, t2.COLUMN_NAME 字段名称, t4.com ...

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

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

  6. 学习笔记<1>技术体系结构

    Android的系统架构采用了分层架构的思想,如上图所示.从上层到底层共包括四层,分别是   1.应用程序程序层   2.应用框架层   3.系统库和Android运行时 4.Linux内核.   每 ...

  7. 14. Longest Common Prefix(暴力循环)

    Write a function to find the longest common prefix string amongst an array of strings. If there is n ...

  8. html5-新元素新布局模板

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

  9. 【Scala学习之二】 Scala 集合 Trait Actor

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  10. Spring boot jackson

    Spring boot 所引用的包里面包含 jackson-databind-2.8.3.jar jackson-annotations-2.8.3.jar jackson-core-2.8.3.ja ...