<!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. XHTML与HTML的差别

    HTML与XHTML之间的差别,粗略可以分为两大类比较:一个是功能上的差别,另外是书写习惯的差别.关于功能上的差别,主要是XHTML可兼容各大浏览器.手机以及PDA,并且浏览器也能快速正确地编译网页. ...

  2. @Resource @Autowired 区别

    spring2.5提供了基于注解(Annotation-based)的配置,我们可以通过注解的方式来完成注入依赖.在Java代码中可以使用 @Resource或者@Autowired注解方式来经行注入 ...

  3. win7 以管理员身份运行cmd, windows services 的创建和删除

    以 http 协议访问svn repository 搭建可用http访问的svn(windows) http://blog.csdn.net/yangyangrenren/article/detail ...

  4. jQuery HighchartsTableHTML表格转Highcharts图表插件

    版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...

  5. 通过条件注释<!--[if IE]><!-->判断浏览器

    有时我们会在网站头部看到: <!--[if IE 7]> <![endif]--> 或者 <!--[if lt IE 9]> <![endif]--> ...

  6. Blog开始

    好久没更新Blog了,去看了下之前的csdn的blog感觉特别的乱,为此决心重开blog,记录工作及学习中的一些事 2013-10-28 ymc ...

  7. Unity3d 开发之 ulua 坑的总结

    相同的 lua 代码在安卓上能正常运行,但在 IOS 上可能不会正常运行而导致报红,崩溃等,我在使用 lua 编程时遇到的一些坑总结如下: 1. File.ReadAllText, 诸如以下代码在 i ...

  8. HAProxy 7层 负载均衡

    系统 CentOS 5.8 x64 wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.26.tar.gz cd haproxy-1.3.2 ...

  9. Nginx日志配置及日志切割

    日志配置 日志对于统计排错来说非常有利的.本文总结了nginx日志相关的配置如access_log.log_format.open_log_file_cache.log_not_found.log_s ...

  10. MongoDB 3.0 WiredTiger Compression and Performance

    MongoDB3.0中的压缩选项 在MongoDB 3.0中,WiredTiger为集合提供三个压缩选项: 无压缩 Snappy(默认启用) – 很不错的压缩,有效利用资源 zlib(类似gzip) ...