动态添加svg元素并进行拖拽

最新推荐文章于 2025-04-15 10:40:52 发布

乱搭巴士

最新推荐文章于 2025-04-15 10:40:52 发布

阅读量1k

点赞数

分类专栏：个人学习_本科生

本文链接：https://blog.youkuaiyun.com/qq_45128278/article/details/103582750

版权

个人学习_本科生专栏收录该内容

61 篇文章

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态添加图形和图片并可以拖拽</title>
    <meta content="width=device-width;initial-scale=1">
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="../svg.min.js"></script>
    <script src="../svg.draggable.min.js"></script>

    <style>
        #drawing {
            width: 100%;
            height: 500px;
            margin: 0;
        }
    </style>
</head>

<body>
<!--向svg中添加元素-->
<svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg">
    <script xlink:href="SVGPan.js"/>
    <g id="wholezoom" style="transform-origin: 0 0;position: absolute">



        <circle id="c1" cx="240" cy="200" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)' />
        <circle id="c2" cx="230" cy="390" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/>
        <circle id="c3" cx="780" cy="196" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/>
        <circle id="c4" cx="340" cy="110" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/>
        <circle id="c5" cx="492" cy="320" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/>

    </g>
</svg>
<button onclick="onLoad()">
    添加
</button>
</body>
<script>
    // <image x="-1" y="-1" width="960" height="596" xlink:href="images/eerduosi2.jpg" id="picture" />
    // 向svg中动态添加图形和图片
    //function onLoad(){

    var m,e, t, s,draw = SVG('svg').attr({ 'font-size': 10 }).fill('#f57518')
    //        向svg中添加矩形rect（宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
    //e = draw.rect(959,595).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 10000, maxY: 10000 })
    //        向svg中添加矩形image（图片地址，宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
    draw.image("eerduosi2.jpg",959,595).center(480, 297).draggable({ minX: -4000, minY: -4000, maxX: 4000, maxY: 4000 })
    draw.fill('green')
    draw.stroke('black')


    //        在指定位置添加一个text标签
    //draw.plain('constrained with object and ghost').center(200, 210)

    //}
</script>
</html>