Note For SVG

题外话,移动端qq音乐和移动端得网易云音乐他们的播放器都用到了svg,所以自己实现了一下

• qq音乐

• 自定义

点击在线查看实例代码

世界,视野,视窗

• 世界: 在svg中, 规定了世界的定义是无穷大的,也就是你在浏览器中看到的知识其中一部分;
• 视野: 它是一个观察世界的矩形区域,在svg中用viewbox来定义,它包含四个参数, x(x轴),y(跟数学中y轴向反),width,height)
• 视窗: 它规定视野中的width和height

四个坐标系

svg中使用的坐标系是笛卡尔直角坐标系,它包括了一个原点(O)以及两条相互垂直的数轴(x,y),在数学上,x跟y的角度的矢量方向是逆时针的,而在svg中,它俩是顺时针方向,一句话概括,他俩之间的角度即时x轴正方向到y轴正方向的直角旋转角度规定为正方向(顺时针).

1. 用户坐标系(user coordinate)

   我们称它为世界坐标系,我们设置viewbox,也就是来观察用户坐标系的某个区域,它是最原始的坐标系

2. 自身坐标系 (current coordinate)

   每个图形元素或分组独立与生俱来

3. 前驱坐标系 (previous coordinate)

   父容器的坐标系

4. 参考坐标系 (reference coordinate)

   使用其他坐标系来考究自身的情况时使用

坐标变换

svg中可以使用g标签进行分组,然后统一进行坐标变换

• 线性变换
• transform属性

图形绘制

在svg中,基本图形有一下几种(初次接触我就感觉很亲切,因为很多都是css中clip-path的属性)

• rect(矩形)

它接受[x, y, rx, ry, width, height],值得注意的是,一个矩形如果想变成一个椭圆,只需要改变x轴和y轴跟矩形的角度,rx和ry就是做这件事,分别定义一个椭圆的x轴半径和y轴半径

• circle(圆形)

它接受[cx, cy, r]3个参数

• ellipse(椭圆形)

它接受[cx, cy, rx, ry]4个参数

• line(线段)

它接受[x1, x2, y1, y2]4个参数, 分别代表两个点的坐标

• polyline(折线)

使用points指定各个坐标点位置

• polygon(多边形)

同折线一样,只不过多边形会闭合

另外,如果你想绘制更复杂的图形如曲线,需要用到path标签

点击在线查看实例代码

颜色渐变,笔刷

颜色可以使用rgb或者hsl进行设置

• rgb三个值取值范围都在[0, 255]
• hsl分别表示颜色[0,359],饱和度[0%,100%],亮度[0%,100%]

渐变分为[线性渐变]和[径向渐变]两种

1. 线性渐变(linearGradient)

点击在线查看实例代码

渐变的颜色通过stop标签定义,x1,y1,x2,y2表示的是图形的最左上端和最右下端,默认是根据自身坐标系作为参照,gradientUnits=ObjectBoundingBox,而UserSpaceOnUse是根据用户坐标系

1. 径向渐变(radialGradient)

点击在线查看实例代码

同样渐变的颜色通过stop标签定义, 其中fx和fy是用来指定焦点的位置

笔刷(pattern)

点击在线查看实例代码

使用pattern标签,我们可以为它的x,y,width,height指定单位是objectBoundingBox还是userSpaceOnUse,当我们指定patternUnits=”objectBoundingBox”是,它的x,y,width,height是根据容器的百分比计算的

点击在线查看实例代码

同样我们也可以给他们的内容指定单位patternContentUnits,计算方式跟patternUnits一样

点击在线查看实例代码

Path

path可以画出任何你想要的图形,它有如下命令,稍显复杂

• 命令区分大小写, 大写表示坐标参数为绝对位置,也就是绘制会以用户坐标系为参考,小写表示参数为相对位置,也就是会以自身坐标系为参考
• 最后的参数表示最终要到达的位置
• 上一个命令结束的位置就是下一个命令开始的位置
• 命令可以重复参数表示重复执行同一条命令

直线命令

直线命名有 M, L, H, V, m, l, h, v

1

<path d="M 10 10 L 300 500"/>

点击在线代码操作

弧线命令

使用A命令绘制弧线,它的参数比较复杂

1

<path d="M 10 10 L 300 500 A 300 200 0 1 0 300 300"/>

点击在线代码操作

贝塞尔曲线

• 二次贝塞尔曲线

它包含一个起始点,控制点和结束点,因为是二次贝塞尔曲线, 所以它的命令是 M x0 y0 Q x1 y1 x y

1

<path d="M215 283 Q 361 177 507 281"/>

• 三次贝塞尔曲线

跟二次唯一不同点,它多了一个控制点,命令是 M x0 y0 C x1 y1 x2 y2 x y

1

<path d="M258 353 C 330 225 531 228 579 350"/>

• 光滑曲线

T: Q的光滑版本

1

<path d="M200,300 Q400,50 600,300 T1000,300"/>

我们发现在这条二次贝塞尔曲线中, 我们在T中只指定一个结束点的坐标而没有设置控制点坐标.假设第二段贝塞尔曲线存在一个控制点(朝下)C1, C1的垂直方向跟第一条贝塞尔曲线的结束点重合,他俩关于这个重合的点发生了镜像关系,所以我们通过第一条贝塞尔曲线的控制点就可以控制两条贝塞尔曲线

S: C的光滑版本

1

<path d="M600,800 C625,700 725,700 750,800 S875,900 900,800" />

如图右下角最后一个张图就是三次光滑贝塞尔曲线, 同样值定义了第二个控制点坐标和结束位置坐标,跟前面二次光滑贝塞尔曲线一样的原理,都是通过镜像的方式去确定控制点位置和起始点位置

时隔三天,咱们继续svg学习之旅

文本绘制

svg提供了text和tspan两个文本标签

点击在线代码操作

1. 可以使用x,y属性定义文本的渲染位置,它是根据用户坐标系
2. 提供了dx和dy,它类似css中的letter-space用来控制字体间距,svg它更方便,你可以控制它的x轴方向和y轴方向的距离,通样,dy和dx可以传入数组形式
3. 可以使用style定义css样式

代码的运行结果,我们发现中文字体并没有很好的根据底部对齐,而是根据baseline(基线).

字体垂直居中

svg 提供了text-anchor用来处理水平居中

点击在线代码操作

当然,垂直居中也是有

点击在线代码操作

常用的三个属性:

• text-after-edge 相当于top顶部对齐
• central 相当于middle居中
• text-before-edge 相当于bottom底部对齐

图形的引用、裁切和蒙版

• 使用use标签对图形进行引用

  点击在线代码操作

• 使用clip标签裁切图形

  点击在线代码操作

• 使用mask标签创建蒙版

  点击在线代码操作

SVG动画

可以尝试将上面的代码动起来

点击在线代码操作

使用animate标签定义动画, 定义attributeName和attributeType确定你要操作的属性, attributeType也可以指定为css,从而去操作css中的属性,同样,如果想让动画结束之后保持状态,可以使用fill=”freeze”,如果想重复,则repeatCount=”indefinte”,示例中使用了begin属性,通过id去控制动画的执行顺序

详细请参照 https://svgwg.org/specs/animations/

–

好了, svg相关内容就更新到这里了,从9.8号到今天17号, 也是有满满的收获, 最后祝大家中秋节快乐~, bye