<!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. 关于Google Chrome 浏览器的一些命令及用法

    http://blog.csdn.net/zyz511919766/article/details/7356306 一些Chrome的地址栏命令(这些命令会不停的变动,所有不一定都是好用的) 在Chr ...

  2. apache2.2+tomcat配置[转]

    Apache和Tomcat同是Apache基金会下面的两个项目. 一个是HTTP WEB服务器,另一个是servlet容器(servlet container),最新的5.5.X系列实现Servlet ...

  3. Employment Planning DP

    Employment Planning Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  4. git 以及 github 使用系列

    本人打算开始写一个有关git 使用,以及github 使用的系列文章了,一来可以自己总结,二来github用好了,可以存放自己的一些知识框架吧. 1.准备 : 有一个 github上的账号, wind ...

  5. PAT 天梯赛 L2-004 这是二叉搜索树吗？

    递归判断+建树 题目链接:https://www.patest.cn/contests/gplt/L2-004 题解 二叉搜索树的特点就是其根节点的值是位于左右子树之间的,即大于左子树的所有值,但是小 ...

  6. Linux iptables 防火墙详解

    0x00 iptables介绍 linux的包过滤功能,即linux防火墙,它由netfilter 和 iptables 两个组件组成. netfilter 组件也称为内核空间,是内核的一部分,由一些 ...

  7. Hibernate---基础配置

    hibernate.cfg.xml里可以设置一个值显示更详细的sql语句: <property name="format_sql">true</property& ...

  8. MySQL常用命令总结3

    id SMALLINT UNSIGNED [AUTO_INCREMENT] PRIMARY KEY, //把id定义为主键且自动排号,每张数据表只有一个主键,不能为NULL,确保记录唯一性 //省略a ...

  9. git 常用命令--Linus Torvalds

    1.git log 显示仓库的历史记录,默认显示所有记录, 1)git log -m,显示最近的几次提交,, 2)git log --pretty=oneline  显示提交hash和注释 -p 按补 ...

  10. python 错误AttributeError: 'module' object has no attribute 'AF_INET'

    写了一个简单的python socket的程序.运行时,报错如下 原因:文件的命名与Python的function的命名冲突 修改名称后,发现还是无法运行,检查目录下面是否有 这样子的一个文件,删除即 ...