<!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>
