SVG基础教程(超级详细)

张宪坤发布于2019-08-21 17:42 / 3554人阅读

摘要：光滑三次贝塞尔曲线指令跟在指令或指令后面补刀，它会自动在基础上生成一个对称点，所以指令只需要两个点就可以。二次贝塞尔曲线是控制点，表示的是曲线的终点。

一、内置图形:

rect(矩形)    
circle(圆)  
ellipse(椭圆)   
line(直线)   
polyline(折线)  
polygon(多边形)  
path(路径)

二、内置图形的html属性或(css样式):

fill(填充颜色)   
fill-opacity(填充透明度)
stroke(边框颜色)   
stroke-width(边框宽度)   
stroke-opacity(边框透明度)   
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]

三、常见图形用法 1、矩形

基本用法

扩展用法

2、圆

基本用法

扩展用法

3、椭圆

基本用法

扩展用法

4、直线

基本用法

扩展用法

5、多边形

基本用法

扩展坐标

第一个点和最后一个点会连接起来，形成闭合的图形

6、折线

基本用法

扩展用法

第一个点不会和最后一个点连起来，不会闭合

7、路径

路径是svg中最强大的图形

路径是由一系列命令所组成。

命令            名称                        参数
 M           moveto  移动到                (x y)+
 Z          closepath  关闭路径            (none)
 L           lineto  画线到                (x y)+
 H          horizontal lineto  水平线到      x+
 V          vertical lineto  垂直线到        y+
 A        elliptical arc椭圆弧             (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
 C        curveto 三次贝塞尔曲线到          (x1 y1 x2 y2 x y)+
 S     smooth curveto光滑三次贝塞尔曲线到   (x2 y2 x y)+
 Q        Bézier curveto二次贝塞尔曲线到    (x1 y1 x y)+
 T     smooth Bézier curveto光滑二次贝塞尔曲线到  (x y)+

如果指令字母是大写的，例如M, 则表示坐标位置是绝对位置；如果指令字母小写的，例如m, 则表示坐标位置是相对位置。

基本用法

扩展用法

图片描述

7.1、贝塞尔曲线(CSQT简称“厕所切图”)

(1)、三次贝塞尔曲线

Cx1 y1, x2 y2, x y

x1,y1 和x2，y2分别为控制点1和2，而x，y为曲线上的关键点
图片描述
下面为曲线上的点随着时间的变化而变化的过程。

(2)、光滑三次贝塞尔曲线

Sx2 y2, x y

S指令跟在C指令或S指令后面补刀，它会自动在C、S基础上生成一个对称点，所以S指令只需要两个点就可以。

(3)、二次贝塞尔曲线

Qx1 y1, x y

(x1,y1)是控制点，(x,y)表示的是曲线的终点。

下面为曲线上的点随着时间的变化而变化的过程。

(4)、光滑二次贝塞尔曲线

Tx y

T指令和S指令类似，是给Q、T指令补刀的，T指令只有一个曲线终点，没有控制点(由Q的对称点自动生成)；
也可以多带带使用，当多带带使用时，是一条直线；

7.2、圆弧

A rx ry x-deg large-arc sweep-flag x y

rx ry表示x轴半径和y轴半径，x-deg表示x轴旋转角度，large-arc表示大于180度还是小于180度(0为小，1为大)，sweep-flag表示弧线方向(0为沿逆时针，1为沿顺时针)，x y为最终坐标。

8、文本

基本用法

I love SVG

扩展用法

I love SVG


    I love SVG



    i LOVE d3
  



    I LOVE D3

沿path方向排列文本textPath



    
            Text travels along any path that you define for it.

9、渐变

分为线形渐变和径向渐变

10、定义和分组

定义可重用部件

使用g分组，或定义统一的样式。

使用引用在defs中定义的元素，还可在use上设置fill，stroke等属性。

11、动画和交互性

动画被弃用，请使用css animations或者web animations代替

12、事件

最常用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、 onunload 和 onrepeat。

四、好用的svg库 1、svg.js

svg.js更加接近原生svg语法，可以直观的操作svg。svg.js更快，兼容性好，上手更方便。

2、Snap.svg

Snap.svg更接近jquery的语法，来操作svg。Snap.svg更全，功能丰富。

专线服务超融合服务器 python详细教程绑定域名详细教程 html详细教程 hadoop详细教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89899.html

2月份前端资源分享

摘要：月份前端资源分享更多资源请文章转自前端生成好看的二维码十大经典排序算法带动图演示为什么知乎前端圈普遍认为游戏和展示的个人整理和封装的库中文详细注释供新手学习使用扩展语法记录掉坑初期工具汉字拼音转换工具实现汉字转拼音的插件下拉列表支持拼音简 2月份前端资源分享更多资源请Star：https://github.com/maidishike... 文章转自：https://github...

yanwei 2019-08-20 14:25 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

chengjianhua 2019-08-29 12:35 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

Anonymous1 2019-08-20 16:31 评论0 收藏0