svg动态添加事件

html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>流程图 BZ08_Mtitle>
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;">
   
        <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>


body>
html>

效果如图

你可能感兴趣的:(svg)