走进SVG

其他 2018-06-19 04:14:11 阅读次数: 2

一、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


circle圆：

参数：cx,cy,r



ellipse 椭圆

参数：cx,cy,rx,ry


line直线

参数：cx,cy,rx,ry


polyline折线

参数：points="x1 y1 x2 y2"


polygon多边形：

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


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.前区坐标系（父容器的坐标系）


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中的坐标变换



旋转

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

语法：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命令汇总

命令基本规律

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-弧的终点位置












猜你喜欢

转载自blog.csdn.net/pansuyong/article/details/79341048
SVG
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022