SVG开篇
SVG是可缩放的矢量图,在计算机中有两种图形,一种是位图,一种是矢量图
-
位图
传统的jpg / png / gif图都是位图
位图是由一个个很小的颜色小方块组合在一起的图片,一个小方块代表1px
优点:色彩丰富逼真
缺点:放大后会失真,体积大
-
矢量图
矢量图是用XML格式定义,通过[路径] 和 [填充颜色]来描述渲染的图片
优点:放大后不会失真,体积很小
缺点:不易制作颜色变化太多的图像
-
注意点
和canvas一样,svg也有默认的宽高,并且默认的宽高和canvas都是一样的,默认的宽度是300px,默认的高度是150px
和canvas不同的是,svg可以通过css设置宽高也可以通过行内属性设置宽高
SVG四种使用方法
内嵌到HTML中(直接在HTML中绘制)
-
通过浏览器直接打开SVG文件
- 如果需要将svg保存到单独的一个文件中,并且需要通过浏览器直接打开,那么久必须给svg添加一个属性 xmlns = "http://www.w3.org/2000/svg";
在HTML的img标签中引用
作为CSS背景使用
SVG绘制矩形
-
绘制矩形:rect
x/y: 指定绘制的位置
width/height: 指定绘制的大小
fill: 修改填充的颜色
stroke: 修改描边的颜色
stroke-width: 修改描边的宽度
rx/ry: 设置圆角的半径
SVG绘制圆和椭圆
-
绘制圆:circle
cx/xy: 圆绘制的位置
r: 圆的半径
-
绘制椭圆:ellipse
cx/cy: 椭圆绘制的位置(圆心的位置)
rx: 水平方向的半径
ry: 垂直方向的半径
SVG绘制直线和折线
-
绘制直线:line
x1/y1: 设置起点
x2/y2: 设置终点
-
绘制折线:polyline
- points: 设置所有的点,两两一对
-
绘制多边形:polygon
- polygon和polyline差不多,只不过会自动关闭路径
SVG常用属性
fill: 修改填充颜色
fill-opacity: 0~1设置填充颜色的透明度
stroke: 修改描边颜色
stroke-width: 修改描边宽度
stroke-opacity: 0~1 设置描边透明度
stroke-linecap: butt/square/round 设置线段两端帽子
stroke-dasharray: 设置虚线
stroke-dashoffset: 设置虚线偏移位
stroke-linejoin: miter/bevel/round 设置折线转角样式
注意点:在SVG中这些所有的常用属性都是可以在CSS中使用的
SVG绘制路径
-
SVG路径(path)是一个比较牛X的东西,可以绘制任意图形,只不过比较复杂而已
M = moveto 起点
L = lineto 其他点
H = horizontal lineto 和上一个点Y相等
V = vertical lineto 和上一个点X相等
Z = closepath 关闭当前路径
-
路径指令注意点
大写字母是绝对定位,小写字母是相对定位
绝对定位: 写什么位置就是什么位置
相对定位: 相对上一次的位置,在上一次位置基础上调整
SVG绘制圆弧
-
A(rx,ry,xr,laf,sf,x,y) 从当前位置绘制弧线到指定位置
rx(radius-x):弧线X半径
ry(radius-y):弧线Y半径
xr(xAxis-rotation):弧线所在椭圆旋转角度
laf(large-arc-flag):是否选择弧较长的那一段
sf(sweep-flag):是否顺时针绘制
x,y:弧的终点位置
SVG绘制贝塞尔曲线
-
Q(x1,y1,x,y) 从当前位置绘制二次贝赛尔曲线到指定位置
x1/y1: 控制点位置
x/y: 终点位置
-
C(x1,y1,x2,y2,x,y) 从当前位置绘制三次贝赛尔曲线到指定位置
x1/y1: 控制点1位置
x2/y2: 控制点2位置
x/y: 终点位置
SVG绘制文本
和canvas一样,是以左下角作为参考
和canvas一样,默认是文字的基线和指定的位置对齐
-
绘制文本:text
x/y: 指定绘制位置
style: 设置文字样式
text-anchor: 指定文字水平方向对齐方式
dominant-baseline: 指定文字垂直方向对齐方式
dx/dy: 相对前一个文字位置,未设置位置的文字会继承前一个文字
绘制多行文本: <text><tspan>文本内容</tspan></text>
-
绘制路径文本:textPath
定义一个路径
告诉文本需要按照哪个路径来绘制(xlink:href)
注意点:如果是绘制路径文本,那么超出路径范围的内容不会被绘制出来
SVG绘制超链接
-
可以给任意内容添加超链接,只需要用超链接包裹起来即可
xlink:href: 指定链接地址
xlink:title: 指定链接提示
target: 指定打开方式
SVG绘制图片
通过image标签
默认情况下我们指定的图片多大就绘制多大
当设置的尺寸和图片实际尺寸不一样时,高度填满,宽度等比拉伸
SVG结构标签
-
g结构元素
g是group的缩写,可以将多个元素放到一个g标记中,这样就组成了一个组
以便操作统一,比如旋转,缩放或者添加相关样式等等
g标记设置的所有样式都会应用到这一组所有的样式中
-
use
g结构元素封装的图形还可以通过<use>元素进行复制使用
<use xlink:href="">
-
defs
- g封装的元素默认是可见的,如果仅仅是需要定义一组模板,将来需要用到时候才显示,那么就可以使用defs
-
symbol
symbol兼具<g>的分组功能和<defs>初识不可见的特性
symbol能够创建自己的视窗,所以能够应用viewBox和preserveAspecRatio属性
SVG裁剪和蒙版
-
clipPath
- 只有路径范围内的内容会被显示,路径范围以外的内容不会被显示
-
mask
mak和clipPath差不多
裁切路径是可见与不可见的突变
蒙版则是可见与不可见的渐变
注意点: 在指定裁剪和蒙版的时候需要提供过url(#id)来指定
SVG渐变色
-
和Canvas一样,在SVG中也可以生成渐变颜色
<linearGradient></linearGradient> 线性渐变
<radialGradient></radialGradient> 径向渐变
-
渐变属性
x1/y1: 渐变范围开始位置
x2/y2: 渐变范围结束位置
默认情况下x1/y1/x2/y2是当前元素的百分比,可以通过gradientUnits修改
gradientUnits = "objectBoundingBox"
gradientUnits = "userSpaceOnUse"
注意点: 使用渐变颜色需要通过url(#id)来使用
SVG画笔
在SVG中除了可以使用纯色和渐变色作为填充色以外,还可以使用自定义图形作为填充
-
Pattern属性
width/height默认情况下也是百分比
可以通过gradientUnits修改
patternUnits="objectBoundingBox"
patternUnits="userSpaceOnUse"
viewBox
ViewBox就是可视区域,用户能看到的区域
默认情况下,可视区域的大小和内容区域大小是一致的,但是我们也可以手动修改可视区域的大小
-
ViewBox属性格式
viewBox="x y width height"
x: 修改可视区域x方向位置
y: 修改可视区域y方向位置
width/height: 修改可视区域尺寸,近大远小
默认情况下如果viewBox的尺寸是等比缩放的,那么调整后viewBox区域的xy和内容区域的xy对齐
如果viewBox的尺寸不是等比缩放的,那么系统就会调整viewBox的位置,我们设置的x/y会失效
-
如果需要viewBox的xy和内容区域的xy继续保持位置,那么就需要使用preserveAspectRatio属性来设置对齐方式
xMin viewport和viewBox左边对齐
xMid viewport和viewBox x轴中心对齐
xMinx viewport和viewBox右边对齐
YMin viewport和viewBox上边缘对齐,注意Y是大写
YMid viewport和viewBox y轴中心点对齐,注意Y是大写
YMax viewport和viewBox下边缘对齐,注意Y是大写
SVG动画
-
在SVG中提供了三种常用动画标记
<animate> 基础动画
<animateTransform> 形变动画
<animateMotion> 路径动画
-
SVG动画使用方式
创建动画,告诉动画标记哪个元素需要执行动画
创建元素,在元素中说明需要执行什么动画
-
SVG动画属性
attributeType: CSS/XML 规定属性值的名称空间
attributeName: 规定元素的哪个属性会产生动画效果
from/to: 从哪到哪
dur: 动画时长
fill: 动画结束之后的状态 保持freeze结束状态/remove恢复初始状态
-
SVG动画常用属性
repeatCount: 规定动画重复的次数
repeatDur: 规定动画重复总时长
-
begin: 规定动画开始的时间
begin="1s"
begin="click"
begin="click + 1s"
-
restart: 规定元素开始动画之后,是否可以被重新开始执行
always: 动画可以再任何时候被重置,这是默认值
whenNotActive: 只有在动画没有被激活的时候才能被重置,例如在动画结束之后
never: 在整个SVG执行的过程中,元素动画不能被重置
calcMode: 运动速度
keyTimes: 划分动画时间片段,取值0~1
value:划分对应取值片段的值
- 形变动画中固定的属性
- attributeName: transform
- type: translate/rotate/scale
SVG脚本编程
-
创建SVG时必须指定命名空间
- const SVG_NS = "http://www.w3.org/2000/svg"
-
使用xlink属性也必须指定命名空间
- const XLINK_NS = "http://www.w3.org/1999/xlink"
-
脚本编程推荐自学svg框架
