svg动态添加小人

最新推荐文章于 2021-11-30 08:05:07 发布

weixin_30487701

最新推荐文章于 2021-11-30 08:05:07 发布

阅读量409

点赞数

原文链接：http://www.cnblogs.com/zhaozhenzhen/p/8422187.html

版权

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

转载于:https://www.cnblogs.com/zhaozhenzhen/p/8422187.html

weixin_30487701

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg动态添加小人

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>流程图 BZ08_M</title></head><style> input{ margin: 10...
复制链接

扫一扫