走进SVG

一、SVG简介

1.使用XML描述的矢量文件

2.浏览器支持情况：

IE9+

一、SVG简介-使用方式

1.浏览器直接打开；

2.在html中使用<img>标签应用：

例如：

<img src="simple.svg" alt="">；

3.直接在HTML中使用SVG标签；

4.作为CSS背景:

div{
    background: url("simple.svg") no-repeat;
}

基本图形和属性

1、基本图形

reck矩形：

参数：x,y,width,height,rx,ry

走进SVG

circle圆：

参数：cx,cy,r

走进SVG

ellipse 椭圆

参数：cx,cy,rx,ry

走进SVG

line直线

参数：cx,cy,rx,ry

走进SVG

polyline折线

参数：points="x1 y1 x2 y2"

polygon多边形：

参数：points="x1 y1 x2 y2 x3 y3 x4 y4"

走进SVG

2、基本属性

1.fill=#fff;填充颜色

2.stroke=#000;描边颜色

3.strokewidth=10;描边的粗细

transform="rotate(30)"；


<svg xmlns="http://www.w3.org/2000/svg" height="900" width="900">
//矩形
 <rect x="10" y="10" rx="5" ry="5" width="200" fill="#ccc" height="100px"></rect>

 //圆
 <circle cx="250" cy="100" r="50" stroke="red" fill="none"> </circle>



//椭圆
<ellipse cx="260" cy="190" rx="100" ry="20" stroke="red" fill="none"></ellipse>
    
//直线
<line x1="10" y1="120" x2="160" y2="220" stroke="blue">  </line>

//折线
<polyline points="250 120 300 220 200 220" stroke="black" fill="none"</polyline>
   
多边形 
<polygon points="350 220 400 320 300 320"
             stroke="red"
             stroke-width="5"
             fill="yellow"
             transform="translate(150 0)">
    </polygon>
</svg>

基本操作API

1.创建图形

document.createElementNS('http://www.w3.org/2000/svg',tagName)

2.添加图形

element.appendChild(childElement)

3.设置获取属性

element.setAttribute(name,value)

element.getAttribute(name)

SVG编辑器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SVG 编辑器</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 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 id="shape-attrs">
            请先创建图形
        </form>
        <h2>外观和变换</h2>
        <form id="look-and-transform" disabled="disabled">
            <p>
                <label style="display: inline;">填充</label>
                <input id="fill" type="color" value="#ffffff" />
            </p>
            <p>
                <label style="display: inline;">描边</label>
                <input id="stroke" type="color" value="#ff0000" />
                <input id="strokeWidth" type="range" value="1" />
            </p>
            <p>
                <label>translateX</label>
                <input id="translateX" type="range" min="-400" max="400" value="0" />

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

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

                <label>scale</label>
                <input id="scale" type="range" 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;

    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: translateX.value,
            ty: translateY.value,
            scale: scale.value,
            rotate: rotate.value
        }));
    });

//    创建svg
    function createSVG() {
        var svg = document.createElementNS(SVG_NS, 'svg');
        svg.setAttribute('width', '100%');
        svg.setAttribute('height', '100%');
        canvas.appendChild(svg);

        svg.addEventListener('click', function(e) {
            if (e.target.tagName.toLowerCase() in shapeInfo) {
                select(e.target);
            }
        });
        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;
//    更新translate属性
        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);
    }

//    更新translate属性
    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>

SVG的坐标系统

SVG中的图形分组

1.<g>标签来创建分组

2.属性继承（在分组上设置的属性，子元素是可以继承下来的）

3.可以在分组上使用transform属性定义坐标变换

4.<g>标签可以嵌套使用

<svg xmlns="http://www.w3.org/2000/svg">
    <g stroke="green" fill="none" transform="translate(20,60)">
        <rect x="20" y="20"width="200px" height="50px" >

        </rect>
        <rect x="95" y="70"width="50px" height="180px">

        </rect>
    </g>
</svg>

SVG标签系统概述

四个坐标系

1.用户坐标系

2.自身坐标系

3.前区坐标系（父容器的坐标系）

走进SVG

OA：世界坐标系（用户坐标系）,是OB的前区坐标系；

OB：是C和D的前区坐标系,B的自身坐标系，

B的transform表示B基于它的前区坐标系OA向下移动50；

OC：C的自身坐标系(自身属性x,或y等的值是基于自身的坐标系)；

OD：D的自身坐标系；

OB，OC，OD三个坐标系重合了，是因为C和D上面都没有transform属性。

4.参考坐标系（任意一个作为参考的坐标系）

此时的参考坐标系为用户坐标系，a的坐标为（50,50）

SVG中的坐标变换

走进SVG

旋转

区坐标系到自身坐标系的线性变换。

语法：rotate（deg）,translate（x,y）,scale（sx,sy）

SVG的rgb和hsl。

1.rgba(r,g,b,a);

2.hsla(h,s%,l%,a）

h:色相（0-359），s：饱和度，l：亮度

例如：

<rect fill="grb(255,0,0)">

 <rect strokel="hsl(0,50%,60%,0.5)">

SVG的渐变

SVG的path

path命令汇总

走进SVG

命令基本规律

1.区分大小写：大写表示坐标参数为绝对位置，参数表示画笔要到达的位置，小写则为相对位置，参数表示画笔要移动的位置。

2.最后的参数表示最终要到达的位置。

3.上一个命令结束的位置就是下一个命令开始的位置。

4.命令可以重复参数表示重复执行同一条命令。

移动和直线命令

1.M（x,y）+移动画笔，后面如果有重复参数，会当做是L命令处理；

2.L（x,y）+直线到指定的位置；

3.H（x）+绘制水平直线到指定的x位置；

4.V（y）+绘制竖直线到指定的y位置；

5.m、l、h、v使用相对位置绘制。

狐线命令

1.A（rx,ry,xr,laf,sf,x,y）

最复杂的命令

rx-（radius-x）狐线所在椭圆的x半轴长；

ry-（radius-y）狐线所在椭圆的y半轴长；

xr-（xAxis-rotation）狐线所在椭圆的长轴角度；

laf-（large-arc-flag）是否选择弧长较长的那一段弧用0和1表示；

sf-（sweep-flag）是否选择顺时针方向的那一段弧；

x,y-弧的终点位置

走进SVG

基本操作API

SVG编辑器

SVG的坐标系统

SVG中的图形分组

四个坐标系

SVG中的坐标变换

旋转

区坐标系到自身坐标系的线性变换。

SVG的rgb和hsl。

SVG的渐变

SVG的path

相关推荐