<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>svg editor</title>

    <style>

        #toolbox{

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            width: 250px;

            border-right: 1px solid #CCC;

        }

        #toolbox h2{

            margin: 0;

            padding: 0;

            background: #EEE;

            font-size: 16px;

            height: 24px;

            line-height: 24px;

            padding: 5px 10px;

        }

        #toolbox form{

            padding: 10px;

        }

        #canvas{

            position: absolute;

            left:260px;

            top: 10px;

            bottom: 10px;

            right: 10px;

            box-shadow: 2px 2px 10px rgba(0,0,0,.4);

            border-radius: 5px;

        }

        label{

            display: inline-block;

            width: 80px;

            text-align: right;

        }

    </style>

</head>

<body>

    <div id="toolbox">

        <h2>创建</h2>

        <form action="" id="create-shape">

            <button type="button" create="rect">Rect</button>

            <button type="button" create="circle">Circle</button>

            <button type="button" create="ellipse">Ellipse</button>

            <button type="button" create="line">Line</button>

        </form>

        <h2>形状</h2>

        <form action="" id="shape-attrs">

            请先创建图形

        </form>

        <h2>外观和变换</h2>

        <form action="" id="look-and-transform" disabled>

            <p>

                <label for="" style="display: inline">填充</label>

                <input type="color" id="fill" value="#ffffff">

            </p>

            <p>

                <lable style="display: inline">描边</lable>

                <input type="color" id="stroke" value="#ff0000">

                <input type="range" id="strokeWidth" value="1">

            </p>

            <p>

                <label for="">translateX</label>

                <input type="range" id="translateX" min="-400" max="400" value="0">

                <label for="">translateY</label>

                <input type="range" id="translateY" min="-400" max="400" value="0">

                <label for="">rotate</label>

                <input type="range" id="rotate" min="-180" max="180" value="0">

                <label for="">scale</label>

                <input type="range" id="scale" min="-1" max="2" step="0.01" value="1">

            </p>

        </form>

    </div>

    <div id="canvas"></div>

</body>

<script>

    var SVG_NS = 'http://www.w3.org/2000/svg';

    // 图形及对应默认属性

    var shapeInfo = {

        rect:'x:10,y:10,width:200,height:100,rx:0,ry:0',

        circle:'cx:200,cy:200,r:50',

        ellipse:'cx:200,cy:200,rx:80,ry:30',

        line:'x1:10,y1:10,x2:100,y2:100'

    };

    // 默认公共属性

    var defaultAttrs = {

        fill: '#ffffff',

        stroke: '#ff0000'

    };

    var createForm = document.getElementById('create-shape');

    var attrForm = document.getElementById('shape-attrs');

    var lookForm = document.getElementById('look-and-transform');

    var svg = createSVG();

    var selected = null;

    svg.addEventListener('click',function(e){

            if(e.target.tagName.toLowerCase() in shapeInfo){

                select(e.target);

            }

    });

    createForm.addEventListener('click',function(e){

        if(e.target.tagName.toLowerCase()=='button'){

            create(e.target.getAttribute('create'));

        }

    });

    attrForm.addEventListener('input',function (e) {

        if(e.target.tagName.toLowerCase() !='input')return;

        var handle = e.target;

        selected.setAttribute(handle.name,handle.value);

    });

    lookForm.addEventListener('input',function(e){

        if(e.target.tagName.toLowerCase()!='input')return;

        if(!selected)return;

        selected.setAttribute('fill',fill.value);

        selected.setAttribute('stroke',stroke.value);

        selected.setAttribute('stroke-width',strokeWidth.value);

        selected.setAttribute('transform',encodeTranform({

            tx:translateY.value,

            ty:translateY.value,

            scale:scale.value,

            rotate:rotate.value

        }));

    });

    function createSVG () {

        var svg = document.createElementNS(SVG_NS,'svg');

        svg.setAttribute('width','100%');

        svg.setAttribute('height','100%');

        canvas.appendChild(svg);

        return svg;

    }

    function create (name) {

        var shape = document.createElementNS(SVG_NS,name);

        svg.appendChild(shape);

        select(shape);

    }

    function select (shape) {

        var attrs = shapeInfo[shape.tagName].split(',');

        var attr,name,value;

        attrForm.innerHTML = "";

        while(attrs.length){

            attr = attrs.shift().split(':');

            name = attr[0];

            value = shape.getAttribute(name)||attr[1];

            createHandle(shape,name,value);

            shape.setAttribute(name,value);

        }

        for(name in defaultAttrs){

            value = shape.getAttribute(name)||defaultAttrs[name];

            shape.setAttribute(name,value);

        }

        selected = shape;

        updateLookHandle();

    }

    function createHandle (shape,name,value) {

        var label = document.createElement('label');

        label.textContent = name;

        var handle = document.createElement('input');

        handle.setAttribute('name',name);

        handle.setAttribute('type','range');

        handle.setAttribute('value',value);

        handle.setAttribute('min',0);

        handle.setAttribute('max',800);

        attrForm.appendChild(label);

        attrForm.appendChild(handle);

    }

    function updateLookHandle () {

        fill.value = selected.getAttribute('fill');

        stroke.value = selected.getAttribute('stroke');

        var t = decodeTransform(selected.getAttribute('transform'));

        translateX.value = t?t.tx:0;

        translateY.value = t?t.ty:0;

        rotate.value = t?t.rotate:0;

        scale.value = t?t.scale:1;

    }

    function decodeTransform (transString) {

        var match = /translate\((\d+),(\d+)\)\srotate\((\d+)\)\sscale\((\d+)\)/.exec(transString);

        return match?{

            tx:+match[1],

            ty:+match[2],

            rotate:+match[3],

            scale:+match[4]

        }:null;

    }

    function encodeTranform (transObject) {

        return ['translate(',transObject.tx,',',transObject.ty,') ',

        'rotate(',transObject.rotate,') ',

        'scale(',transObject.scale,')'].join('');

    }

</script>

</html>

SVGEditor的更多相关文章

  1. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  2. android5.0----SVG

    SVG ----scalable vector Graphics 可缩放矢量图形 android L 即android 5.0的新特性. 1,SVG是干什么的? 可缩放矢量图形是基于可扩展标记语言(标 ...

  3. DEV中svg图标的使用

    0.开始之前 先看看使用效果 在操作栏的使用: 在菜单中的使用 1.简述SVG图标 中文名:可缩放矢量图形 外文名:Scalable Vector Graphics 外语缩写:SVG 开发商:万维网联 ...

  4. Android 开发 VectorDrawable 矢量图 （一）了解Android矢量图与获取矢量图

    VectorDrawable 矢量图 三部曲: Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图 Android 开发 VectorDrawabl ...

  5. 如何使用IcoMoon字体图标

    如何使用IcoMoon字体图标 一,字体图标工具: 1.登录字体图标网站:https://icomoon.io/app/#/select 2.Svg在线编辑工具:https://c.runoob.co ...

  6. HTML5: SVG （可缩放矢量图形）

    ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...

  7. 使用svgdeveloper 和 svg-edit 绘制svg地图

    目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一.SVGDeveloper 5. 方法二.SVG-Edit 1. 描述编辑   有的时候我们需要自定义地图,本文提 ...

  8. jvectormap地图开发和制作任意国家地图

    jvectormap官网上提供了世界地图和很多国家的地图,但不是所有国家的地图都有,比如沙特阿拉伯的国家地图就没有,怎么办呢? 在http://www.amcharts.com/svg-maps/上下 ...

  9. react ant-design自定义图标

    ant-design给我们提供的图标不够怎么办呢?答案是我们可以自定义图标. 自定义图标也挺简单的,现在图标推荐用svg格式,那么我们就需要制作svg图片. 下面让我们看看如果制作svg图片吧. 1. ...

随机推荐

  1. Spring注入值得2种方式：属性注入和构造注入

    Spring是一个依赖注入(控制反转)的框架,那么依赖注入(标控制反转)表现在那些地方了? 即:一个类中的属性(其他对象)不再需要手动new或者通过工厂方法进行创建,而是Spring容器在属性被使用的 ...

  2. Html基础详解

    HTML是(Hyper Text Mark-up Language)超文本标记语言,是因特网上应用最为广泛的一种网络传输协议,所有的www文件都必须要遵守这个标准.这样就可以让浏览器根据标记语言的规则 ...

  3. centos常用配置收集

    配置ntp服务器: # vi /etc/ntp.conf driftfile /var/lib/ntp/driftrestrict -4 default kod notrap nomodifyrest ...

  4. ICE第三篇------一些疑难点

    1 间接代理 参考http://blog.sina.com.cn/s/blog_53e8499c0100lkoo.html IceGrid用于支持分布式网络服务应用,一个IceGrid域由一个注册表( ...

  5. linux undelete

    http://www.tldp.org/HOWTO/archived/Ext2fs-Undeletion-Dir-Struct/index.html http://www.giis.co.in/deb ...

  6. golang中container/heap包源码分析

    学习golang难免需要分析源码包中一些实现,下面就来说说container/heap包的源码 heap的实现使用到了小根堆,下面先对堆做个简单说明 1. 堆概念 堆是一种经过排序的完全二叉树,其中任 ...

  7. 【安卓手机通用】android adb shell 命令大全

    浏览:3116 | 更新:2013-10-17 17:05 | 标签:安卓 android 一.[什么是shell] Linux系统的shell作为操作系统的外壳,为用户提供使用操作系统的接口.它是命 ...

  8. 一、MongoDB安装及启动

    1 安装 在官网http://www.mongodb.org/downloads下载对应版本,并安装.安装在D:\MongoDB下. 2 设置 1) 新建文件夹,用于存放db数据 D:\MongoDB ...

  9. awk简单用法

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  10. php学习-数组（一）

    数组函数可以对大量性质相同的数据进行存储,排序,插入及删除等操作. 学习任务: 声明数组,输出数组,遍历数组,查询数组中指定元素,获取数组中的最后一个元素. 删除数组中重复的元素.统计数组中元素的个数 ...