svg.draggable.js 实现动态向svg中添加图形和图片并可以拖拽

约定不等于承诺〃 2023-06-05 14:57 77阅读 0赞

源码：

<!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.js"></script>
    
        <style>
            #drawing {
                width: 100%;
                height: 500px;
                margin: 0;
            }
        </style>
    </head>
    
    <body>
    
    <svg id="svg_my" style="border:1px solid #000;width:500px;height:500px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    
    </svg>
    <button onclick="onLoad()">
        添加
    </button>
    </body>
    <script>
    
        // 向svg中动态添加图形和图片
        function onLoad(){
            var m,e, t, s,draw = SVG('svg_my').attr({ 'font-size': 10 }).fill('#f57518')
            //        向svg中添加矩形rect（宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
            e = draw.rect(100,100).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 400, maxY: 400 })
            //        向svg中添加矩形image（图片地址，宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
            draw.image("timg.jpg",100,100).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 400, maxY: 400 })
            //        在指定位置添加一个text标签
           draw.plain('constrained with object and ghost').center(200, 210)
    
        }
    
    
    
    </script>
    </html>
    运行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhdGVyX1BvcGNvcm4_size_16_color_FFFFFF_t_70][]

拖拽后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhdGVyX1BvcGNvcm4_size_16_color_FFFFFF_t_70 1][]

js源码下载地址：

[https://download.csdn.net/download/water\_popcorn/11838717][https_download.csdn.net_download_water_popcorn_11838717]

[https://download.csdn.net/download/water\_popcorn/11838733][https_download.csdn.net_download_water_popcorn_11838733]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhdGVyX1BvcGNvcm4_size_16_color_FFFFFF_t_70]: /images/20230601/c1e439342f1c4bf0b0aaa690dc0a6123.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhdGVyX1BvcGNvcm4_size_16_color_FFFFFF_t_70 1]: /images/20230601/b4e3971647aa41f0a0e9a56643bea566.png
[https_download.csdn.net_download_water_popcorn_11838717]: https://download.csdn.net/download/water_popcorn/11838717
[https_download.csdn.net_download_water_popcorn_11838733]: https://download.csdn.net/download/water_popcorn/11838733