<!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. java中基本数据类型和C语言中基本数据类型转换

    java中 1 short = 2 byte 1 char  = 2 byte 1 int    = 4 byte 1 long = 8 byte C语言中 typedef unsigned char ...

  2. PAT (Advanced Level) 1081. Rational Sum (20)

    简单模拟题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> # ...

  3. PAT (Advanced Level) 1013. Battle Over Cities (25)

    并查集判断连通性. #include<iostream> #include<cstring> #include<cmath> #include<algorit ...

  4. iOS中"查看更多/收起"功能实现

    实现效果如图: 查看更多功能在很多app种都有应用,在这里简单的实现,介绍实现流程: 一个tableViewCell中包含一个collectionView,"查看更多"按钮是tab ...

  5. HDU 1068 Girls and Boys 二分图最大独立集（最大二分匹配）

    Girls and Boys Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  6. CodeForces 621C Wet Shark and Flowers

    方法可以转化一下,先计算每一个鲨鱼在自己范围内的数能被所给素数整除的个数有几个,从而得到能被整除的概率,设为f1,不能被整除的概率设为f2. 然后计算每相邻两只鲨鱼能获得钱的期望概率,f=w[id1] ...

  7. SQL Server 2012 - Transact-SQL

    变量 --全局变量 select @@VERSION --局部变量 declare @i int set @i=5 select @i 通配符:   like   'joh%',  %任意长度的任意字 ...

  8. CentOS 6.4 x64 Cacti 监控安装配置

    Cacti 监控安装配置   环境:   安装Cacti 的服务器   Linux 6.4 x64   ip 10.8.8.11     一: 配置iptables , selinux     vi ...

  9. Linux环境变量相关文件

    执行顺序为: /etc/profile -> (~/.bash_profile | ~/.bash_login | ~/.profile) -> ~/.bashrc -> /etc/ ...

  10. JAVA基础--适配器模式

    interface Window{ // 定义Window接口,表示窗口操作 public void open() ; // 打开 public void close() ; // 关闭 public ...