04-SVG

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框架

  • https://svgjs.com/

  • http://snapsvg.io/docs/