SVG入门

Posted 学如逆水行舟,不进则退。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SVG入门相关的知识,希望对你有一定的参考价值。

SVG是什么?

SVG( SCalabel Vector Graphics)的意思是缩放矢量图形。
1998年,万维网联盟成立工作组,研发了一种通过XML来表现矢量图形的技术,即SVG。所有SVG继承了XML的良好兼容和矢量图形的优点。
良好兼容性:
1、使用<embed>或者<object>元素来显示基本的SVG图形
2、使用<img>来显示SVG图形
3、将SVG图形用作CSS背景图片
4、直接在html文档使用svg标签(需要HTML5支持) 5、对使用CSS或者外部对象元素的HTML元素使用SVG变换、滤镜等特效。
6、对SVG对象使用类似Phoneshop的效果,包括模糊和色彩处理
7、SVG动画
8、使用SVG格式字体

矢量图形优点:
计算机上主要两种表现图形,栅格图形 和矢量图形 。
栅格图形是用像素的矩阵队列来表示,每一个像素代表一个RGB颜色值或者是一个指向颜色列表的索引,通常以一种压缩格式来存储(如JPEG、GIF、PNG等),显示时只要解压处理即可

为什么要使用SVG?

  1. 首先,SVG也是一种XML文件,继承了XML良好的兼容性。

  2. 然后,虽然栅格图片使用起来更加容易和方便,但是我们缩放图片时,栅格图片可能产生失真,而矢量图片不会产生失真。

  3. 最后,canvas绘制出的图片其实就是栅格图片,而且其绘制出的文字是属于图像一部分的,是无法被搜索引擎获取的,但是SVG上的文本却是可以被搜索的。

SVG如何引入?

两种方式:

  1. 内联,直接将SVG标签写入html文档中。(当然需要HTML5的支持)

  2. 外部引入,只要有三种方式。

    • 通过<embed>、<object>来引入页面

    • 通过img的src

    • 通过backgroud的url

SVG基础用法

首先,是一个svg标签,上边有两个属性width和height,设定svg图片的宽高尺寸

<svg width=“500px” height=“500px”></svg>

然后,在svg标签下添加其他所需标签即可
简单图形的绘制:直线、矩形、圆形、椭圆、折线、多边形(不少于三个边)、文本等等
默认单位为px

  1. 直线:
    属性分别为直线起始点坐标和终点坐标
<line x1="10" y1="10" x2="20" y2=“20”></line>
  1. 矩形:
    这些属性分别为矩形左上角坐标,矩形宽高,圆角半径
<rect x="50" y="50" width="100" height="100" rx="10" ry="20"></rect>
  1. 圆形:
    属性分别为半径和圆心坐标
<circle r="50" cx="220" cy="100"></circle>
  1. 椭圆:
    属性分别为x方向轴长和y方向轴长,然后是椭圆的圆心坐标
<ellipse rx="100" ry="50" cx="100" cy="200"></ellipse>
  1. 折线:
    属性很简单,就是一系列坐标,按照写入顺序将这些坐标用直线连接即可
<polyline points="60 50, 75 35, 100 50, 125 35, 150 50, 175 35, 190 50"></polyline>
  1. 多边形:
    创建不少于三个边的多边形,所以points属性中添加坐标数目不能少于三个,坐标表示多边形每个角的坐标
    如果最后一个坐标和第一个坐标不同,会自动闭合,但自动闭合的线是没有线条勾勒痕迹的。
<polygon points="220 100, 300 210, 170 250, 123 234" />
  1. 文本:
    属性为文本距离左边界和右边界的距离
<text x="125" y="220">hello,world</text>

最后,图片的一些样式我们向正常标签添加即可,可以行间,可以内部,也可以外部等等。
最基本是这三个样式,stroke设置线条颜色,stroke-width设置线条宽度,fill设置填充颜色

SVG其他一些复杂用法

svg标签上有个属性viewBox,不设置的话和svg设置宽高一致,相当于给svg元素建立了一套新坐标。然后我们设置添加直线等都是根据viewBox的坐标来设置,在绘制时是和高宽等比例缩放来实现显示。

 <svg width="500px" height="500px" viewBox="0, 0, 50, 50">
        <line x1="20" y1="20" x2="40" y2="20" style="stroke: #000;stroke-width: 3px;"></line>
    </svg>

 

路径path标签:

path支持的指令:

M = moveto(M X,Y) :将画笔移动到指定的坐标位置
L = lineto(L X,Y) :画直线到指定的坐标位置
H = horizontal lineto(H X):画水平线到指定的X坐标位置
V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
Z = closepath():关闭路径 (不区分大小写)
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY): 光滑三次贝塞尔曲线 Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY):光滑二次贝塞尔曲线,映射

这些指令的一些注意:
坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下。
所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系 可以指定一些负数值作为命令的参数,负角度是逆时针,绝对x、y坐标将视为负坐标,而负相对x值向左移,负相对y值向右移。 指令和数据间的空格可以省略
同一指令出现多次可以只用一个

  1. M指令和L指令、m指令和l指令 M/m是移动到其指定坐标,而L/l是从开始处画一条直线到其指定坐标,而这些指令都放到path标签的d属性中,如下代码就是一条从(10,10)到(20,10)的直线
    两套指令基本功能是差不多的,差别在于大M、大L指令的坐标都是绝对的,而小m、小l指令的坐标都是相对于绘制过程中上一个坐标的,也就是在上一个坐标的基础上进行坐标偏移(注意两套指令的第一个坐标都是相对整个svg的绝对坐标)。
    以下两个path等价,但写法却不同
<path d = "M 10 10 L 20 10" />
    <path d = "m 10 10 l 10 0" />
  1. H和V指令
<path d="M20 20 H 90 V 90 H 20 L 20 20" />
  1. A指令

弧线属性参数有7个,分别为rx、ry、x-axis-rotation、large-arc-flag、sweep-flag、x、y
rx:圆弧的x轴半径
ry:圆弧的y轴半径
x-axis-rotatiion:圆弧相对x轴的旋转角度,默认是顺时针,可以设置负值
large-arc-flag:圆弧是大圆弧还是小圆弧,1大圆弧,0小圆弧
sweep-flag:从起点到终点是顺时针还是逆时针,1顺时针,0逆时针
x,y表示终点坐标

 <path d="M 100 100 A 100 100 0 1 1 100 100"></path>
  1. Z命令

不区分大小写,自动连接起始点和终点,自动闭合

  1. Q和T指令、C和S指令

**什么是贝塞尔曲线?**我们只要用到二次和三次的,看下图
一次贝塞尔曲线
技术分享
二次贝塞尔曲线
技术分享
三次贝塞尔曲线
技术分享
四次贝塞尔曲线
技术分享
五次贝塞尔曲线
技术分享

如何绘制贝塞尔曲线?
Q指令:二次贝塞尔曲线
M x0 y0 Q x1 y1 x2 y2
x0 y0是起始点,x1 y1是控制点(控制曲线弧度),x2 y2是终点
技术分享

T指令:二次贝塞尔曲线光滑延伸
M x0 y0 Q x1 y1 x2 y2 T x4 y4
x0 y0是起始点,x1 y1是控制点,x2 y2是终点,x4 y4是二次贝塞尔曲线光滑延伸终点
(x3 y3是延伸曲线控制点,由x2 y2通过x3 y3映射而来,如图)
技术分享

C指令:三次贝塞尔曲线
M x0 y0 C x1 y1 x2 y2 x3 y3
x0 y0是起始点,x1 y1是第一控制点,x2 y2是第二控制点,x3 y3是终点
技术分享

S指令:三次贝塞尔无限光滑延伸
M x0 y0 C x1 y1 x2 y2 x3 y3 S x5 y5 x y6
x0 y0是起始点,x1 y1是第一控制点,x2 y2是第二控制点,x3 y3是终点,x5 y5是延伸曲线第二控制点,x6 y6是延伸曲线终点
(x4 y4是延伸曲线第一控制点,由x2 y2通过x3 y3映射而来,如图)
技术分享

下面是一个二次贝塞尔曲线和三次贝塞尔曲线的小demo:

 <svg width="500px" height="400px" style="border: 1px solid #ddd;">
        <text x="100" y="300" style="stroke: #f40;">二次贝塞尔曲线(Q、T)</text>
        <path d="M 50 200 Q 150 300 250 200 T 450 200" style="stroke: #f40;"></path>
        <text x="100" y="100" style="stroke: blue;">三次贝塞尔曲线(C、S)</text>      
        <path d="M 50 200 C 100 100 150 100 250 200 S 400 300 450 200" style="stroke:blue"></path>
    </svg>

 


svg上边的三个属性viewport、viewBox、preserveAspectRatio

viewport: 表示SVG可见区域的大小,即绘制的图形是在此区域呈现,svg标签中width和height属性设置的就是viewport,如果值为纯数字,则其单位默认为px

viewBox:
viewBox可以理解为新建的一套坐标系统,该下的图形都必须按照此坐标系统来绘制。但这样很难理解。
所以我们可以从另一个角度来理解,那就是viewBox在画布中划了一个矩形盒子,然后将划的矩形盒子尽量放大以铺满画布,类似background-size中的contain属性,不会溢出裁剪。
针对此特点,我们可以用viewBox来截取原图的部分图片,然后放大铺满整个画布显示。

preserveAspectRatio:
该属性作用对象是viewBox, 其值是由两个参数构成。
第一个参数是一个组合,表示viewBox是如何与viewprt对齐的
xMin xMid xMax -> x轴 左中右对齐
yMin yMid yMax -> y轴 上中下对齐
第二个参数表示viewBox如何填充viewport的
meet 保持纵横比缩放viewBox适应biewport
slice 保持纵横比同时比例小的方向填满viewport
none 扭曲纵横比以适应viewport

SVG其他一些属性

由以上大家都知道了stroke、stroke-width和fill分别设置的是勾勒线条颜色、勾勒线条宽度、填充颜色。
需要注意的是stroke-width的值可以是百分比,即相对于当前视图画布的width和height中较大值来计算的。
除了这些基本属性还有其他几个属性,那就是stroke-opacity、fill-opacity、stroke-linecap、stroke-linejoin、stroke-miterlimit、stroke-dasharray、stroke-dashoffset

stroke-opacity和fill-opacity
顾名思义,stroke-opacity和fill-opacity分别设置的是勾勒线条和填充的透明度,值从0~1,0代表完全透明,1代表不透明

stroke-linecap
设置线条首尾样式有三个值butt、round、square,如下图
技术分享

stroke-linejoin 设置两个线段之间的衔接样式,主要用在折线的拐角处,有三个值miter、round、bevel,如下图
技术分享

stroke-miterlimit
如果两条线交汇在一起形成一个尖角,而且属性stroke-linejoin指定了miter,斜接有可能扩展到远远超过出路径轮廓线的线宽。
属性stroke-miterlimit对斜接长度(miterLength)和stroke-width的比率强加了一个极限。当极限到达时,交汇处由斜接miter变成倒角bevel。
斜接长度指的是斜接的外尖角和内夹角之间的距离
stroke-miterlimit的值为纯数字,必须大于等于1(默认大小为4),当比率大于设定的值则stroke-linejoin则由miter变为bevel

stroke-dasharray
用来表示设置虚线描边。
其有两个值,分别表示每条划线的长度以及划线之间的空格的大小。

stroke-dahoffset
用来设置虚线的起始偏移,可以设置百分比、具体长度、inherit

svg动画

针对此部分放到另一个页面去写,感兴趣请猛戳这里

参考来源:

    1. http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/

    2. http://justcoding.iteye.com/blog/2226354

以上是关于SVG入门的主要内容,如果未能解决你的问题,请参考以下文章

text 使用SVG的片段

css 快速片段将svg与中心对齐并缩放到视口大小。

通过 webapp 提供时,SVG 片段标识符在 Safari 中被交换

推荐net开发cad入门阅读代码片段

可从 HTML 拖放到 SVG 上

SVG入门