小试SVG之新手小白入门教程


Posted in Javascript onJanuary 08, 2019

基本概念

svg(Scalable Vector Graphics)是一种基于XML语法的图像格式,全称是可缩放矢量图,其它图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真.SVG是面向图形,HTML时面向文本。

嵌入到HTML

SVG可以写在一个独立的文件中,然后用img, object, embed, iframe等标签插入网页

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

SVG文件可以转为base64编码,然后作为Data URI写入网页

<img src="data:image/svg+xml;base64,[data]" />

SVG书写的注意点

  • SVG的元素和属性必须按照标准格式来写,因为XML是确认大小写的
  • SVG里的属性值必须用引号引起来,就算是数值也必须这么做
  • SVG图像的默认大小是300像素(宽)x 150像素(高)
  • 后面的元素会渲染在前面元素之上

SVG的所有元素

SVG的所有元素

SVG的所有属性

SVG的所有属性

常用的形状元素

小试SVG之新手小白入门教程

其实上图只是对一些常用svg标签的初步认识,因为svg所提供的标签不止这些,而且比如path标签是在svg中最为通用的形状标签,因为它可以通过设置路径画出其它图形,比如矩形,圆,椭圆,多边形,多线段,甚至是复杂的贝塞尔曲线等等

path

第一次看到svg的标签的时候,打开控制台,也是一脸懵逼,首先这里面的d属性是个啥,M是啥,L是啥,Z是啥,H是啥,V是啥,C是啥,S是啥,Q是啥,T是啥,A是啥,我... 打扰了,打扰了

嗯,26个兄弟快凑齐了,马上就可以召唤神龙了。当然,path这条神龙在svg界就是“爸爸”,啥玩意都能给你弄出来,

想要通过path勾勒出美妙的图形,需要了解d这个属性,path标签中的d属性可以定义一系列的指令和参数,每一个指令通过一个字母来指定,比如上面说的M,它表示移动到,也就是"move to"的意思,比如让我们移动到(10, 10)的坐标点,就可以这样写:

<rect d="M10 10" />'

当然每一种字母都是区分大小写的,比如M是基于画布上的一个绝对坐标,而m则是基于上一个点的坐标,也就是相对坐标。比如有下面两种指令

<path d="M20,20 L40 40 M60 60 L80 80" fill="none" stroke="blue" stroke-width="5"/>

<path d="M20,20 L40 40 m60 60 L80 80" fill="none" stroke="blue" stroke-width="5"/>

小试SVG之新手小白入门教程

两个path唯一的区别就是第三个指令,一个是M60 60, 一个是m60 60

线段指令(Line commands)

  • L:L指令会拿到两个参数,x坐标和y坐标,然后从当前位置到指定参数坐标位置来绘制线段
  • H:H其实是horizontal的缩写,意为绘制出水平方向的线段,因为方向已确定,所以只需一个参数就能完成线段的绘制
  • V:同H同理,只不过表示垂直方向(vertical)的线段绘制

比如用H和V来绘制一个矩形, 我们一步一步来

step1

<path d="M10 10 H 90" fill="none" stroke="blue"/>

小试SVG之新手小白入门教程

step2

<path d="M10 10 H 90 V 90" fill="none" stroke="blue"/>

小试SVG之新手小白入门教程

step3

<path d="M10 10 H 90 V 90 H 10" fill="none" stroke="blue"/>

小试SVG之新手小白入门教程

step4

<path d="M10 10 H 90 V 90 H 10 V 10" fill="none" stroke="blue"/>

小试SVG之新手小白入门教程

上面的写法也可以通过一个指令来简写一下,这就用到了Z指令

Z:该指令的作用是从当前位置向起始点画出一条线段,它一般都被放置在一连串节点的末尾,并且不区分大小写。可以理解为”闭环“指令

所以上例可以写成这样,也能达到同样的效果

<path d="M10 10 H 90 V 90 H 10 Z" fill="none" stroke="blue"/>

同样,上例也可以通过相对定位的形式进行改写,效果是一致的

<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="blue"/>

小试SVG之新手小白入门教程

曲线指令(Curve commands)

一说到曲线,那贝塞尔曲线是绕不开的,对于曾高数挂科的我来说是很排斥的,但好在闲着蛋疼,遂学之。

path标签中有两类贝塞尔曲线,一种叫做“三次贝塞尔曲线(cubic curve)“, 一种叫做”二次贝塞尔曲线(quadratic curve)“,这名字听起来就不接地气。

那先从三次贝塞尔曲线说起

C:该指令用于创建一个三次贝塞尔曲线,需指定三组参数

比如:

<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>

首先,(20 20)和(40 20)表示控制节点,一个是描述曲线起始点的斜率,另一个是描述曲线终止点的斜率,最后一组(50 10)表示曲线的终点。总结一下这段示例,就是有一条从(10 10)到(50 10)的一条线段,通过设置两个控制点的斜率,使这条线段的各个点弯曲成正确的(符合斜率趋势的)曲线。

MDN上有多组曲线的对比示例。

小试SVG之新手小白入门教程

这里面我们再添加一种情况,就是设置两个水平的控制节点,来看看线段是如何变化的

<path d="M10 10 C 10 10, 40 10, 50 10" stroke="black" fill="transparent"/>

小试SVG之新手小白入门教程

通过S指令能生成和上述示例中同样的平滑曲线,使用S指令分为以下两种情况

  • S指令跟在C或者另一个S指令之后:那S指令的开始控制节点就是基于前一个控制节点的对称点,并且S指令指定的第一组节点是结束控制节点
  • 单独的S指令:两个控制节点会被设置为同一个点

比如如下代码

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="190"
  height="160"
 >
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

  <circle cx="10" cy="80" r="2" fill="red"/>
  <circle cx="95" cy="80" r="2" fill="red"/>
  <circle cx="180" cy="80" r="2" fill="red"/>
  <circle cx="150" cy="150" r="2" fill="red"/>
 </svg>

我们通过不断改变S的第一组节点来看图形的变化趋势

小试SVG之新手小白入门教程

我们可以看到,随着不断给S指令结束控制节点的横坐标累加,曲线会向右偏移。

接下来看下S指令前面没有其他C或者S指令的情况,代码如下

<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="300"
>
<path d="M10 80 S 95 150, 180 80" stroke="black" fill="transparent"/>

<circle cx="10" cy="80" r="2" fill="red"/>
<circle cx="95" cy="150" r="2" fill="red"/>
</svg>

小试SVG之新手小白入门教程

另一种曲线是二次贝塞尔曲线(quadratic curve)

它通过指令Q来来进行描述,相较于三次贝塞尔曲线,它更为简单。

Q:只需要指定两组参数,第一组表示控制节点的坐标,第二组表示终点坐标。

示例:

<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="300"
>
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>

<circle cx="10" cy="80" r="2" fill="red"/>
<circle cx="95" cy="20" r="2" fill="red"/>
<circle cx="180" cy="80" r="2" fill="red"/>
</svg>

小试SVG之新手小白入门教程

和三次贝塞尔类似,二次贝塞尔也提供了快捷的玩法,那就是T指令

T:通过找到前一个控制节点,来推断出一个新的控制点,T指令后面只需要指定一组结束点坐标即可,由于T指令是基于前一个控制点的基础上来生成的,所以T指令之前必须要有Q指令或者其他T指令,否则生成的控制节点就和前一个控制节点就会重合,在画布上看到的就仅仅是一条直线。

示例:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="300"
  height="300"
 >
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>

  <circle cx="10" cy="80" r="2" fill="red"/>
  <circle cx="52.5" cy="10" r="2" fill="red"/>
  <circle cx="95" cy="80" r="2" fill="red"/>
  <circle cx="180" cy="80" r="2" fill="red"/>

 </svg>

小试SVG之新手小白入门教程

在上面几个例子中,两种曲线都生成了同样的结果,虽然三次贝塞尔允许更多的自由度,但是决定使用哪种曲线还要依照具体情形以及对称曲线的数量来定

弧度(Arcs)

在svg中也可以创建弧度这种曲线,它通过A指令来指定,A指令可以接收7个参数

  • rx:x轴半径
  • ry:y轴半径
  • x-axis-rotation:弧形的旋转角度
  • large-arc-flag:决定弧线是大于180度好事小于180度,0表示小角度弧,1表示大角度弧
  • sweep-flag:表示弧线的方向,0表示从起点到终点沿逆时针画弧,1表示从起点到终点沿顺时针画弧
  • x:弧形终点的横坐标
  • y:弧形终点的纵坐标

示例:

<?xml version="1.0" standalone="no"?>
 <svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <path d="M80 80
   A 45 45, 0, 0, 0, 125 125
   L 125 80 Z" fill="green"/>
 <path d="M230 80
   A 45 45, 0, 1, 0, 275 125
   L 275 80 Z" fill="red"/>
 <path d="M80 230
   A 45 45, 0, 0, 1, 125 275
   L 125 230 Z" fill="purple"/>
 <path d="M230 230
   A 45 45, 0, 1, 1, 275 275
   L 275 230 Z" fill="blue"/>
 </svg>

小试SVG之新手小白入门教程

饼图

通过学习path,我们来绘制一个简单的饼图

<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
  <path d="M80 80
    A 45 45, 0, 0, 0, 125 125
    L 125 80 Z" fill="green"/>
  <path d="M170 80
    A 45 45, 0, 0, 1, 125 125
    L 125 80 Z" fill="red"/>
  <path d="M170 80
    A 45 45, 0, 0, 0, 125 35 
    L 125 80 Z" fill="blue" />
  <path d="M80 80
    A 45 45, 0, 0, 1, 125 35
    L 125 80 Z" fill="pink"/>
 </svg>

小试SVG之新手小白入门教程

小结

在最近的一些项目中,接触到了部分有关svg的需求,所以这篇文章就是记录下自己在学习svg的一部分总结,比较基础,方便自己今后的复习和查阅。

参考资源

MDN SVG

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
vue组件通信传值操作示例
Jan 08 #Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 #Javascript
vuejs简单验证码功能完整示例
Jan 08 #Javascript
详解React中合并单元格的正确写法
Jan 08 #Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 #Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 #jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 #Javascript
You might like
dedecms系统常用术语汇总
2007/04/03 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
js option删除代码集合
2008/11/12 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
Python中字符串的格式化方法小结
2016/05/03 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python set常用操作函数集锦
2017/11/15 Python
python实现关键词提取的示例讲解
2018/04/28 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
使用python实现多维数据降维操作
2020/02/24 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
html Table 表头固定的实现
2019/01/22 HTML / CSS
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
NET程序员上机面试题
2015/05/23 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
面试后的感谢信范文
2014/02/01 职场文书
2014年终个人工作总结
2014/11/07 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技