前端SVG的学习

目标

• 为了可以使用svg动画库,入门下svg
• 学习笔记,个人记录,
• 学习掘金大佬德育处主任
  • https://juejin.cn/user/2673620576140030

rect矩形

• 矩形使用 标签，默认填充色是黑色，当只设置宽高时，渲染出来的矩形就是黑色的矩形。

• 矩形基础属性：

  • x: 左上角x轴坐标

  • y: 左上角y轴坐标

  • width: 宽度

  • height: 高度

  • rx: 圆角，x轴的半径

  • ry: 圆角，y轴的半径

• 通过 x 和 y 可以设置矩形位置

  • 以图像左上角为起点进行移动

• rx,ry如果只设置了一个的值,另一个值默认相同

• 当rect的宽度高度相同并且rx值为宽度一半的时候,就是一个圆形了

  <svg width="300" height="300" style="border: 1px solid red;">
    <rect 
      width="100" 
      height="100"
      rx="50"
    >rect>
  svg>
1
2
3
4
5
6
7

圆circle

圆形使用 标签，基础属性有：

• cx: 圆心在x轴的坐标
• cy: 圆心在y轴的坐标
• r: 半径
• cx,cy都设置为0

  <svg width="300" height="300" style="border: 1px solid red;">
    <circle cx="0" cy="0" r="50">circle>
  svg>
1
2
3

ellipse椭圆

椭圆使用 标签，基础属性有：

• cx: 圆心在x轴的坐标
• cy: 圆心在y轴的坐标
• rx: x轴的半径
• ry: y轴的半径

• 和 差不多，只是将半径拆成x轴和y轴的。

line线条

很好理解,点组成了线,所以就需要2点的坐标去组成线

直线使用 标签，基础属性有：

• x1: 起始点x坐标
• y1: 起始点y坐标
• x2: 结束点x坐标
• y2: 结束点y坐标
• stroke: 描边颜色
• 只有 x1 和 x2 ，没有 x3 ，也没有 y3 。
• 需要注意的是， 需要使用设置 stroke 属性才会有绘制效果。

  <svg width="300" height="300" style="border: 1px solid red;">
    <line
      x1="0"
      y1="0"
      x2="100"
      y2="100"
      stroke="black"
    >line>
  svg>
1
2
3
4
5
6
7
8
9

polyline折线

使用 可以绘制折线，基础属性有：

• points点集(多个坐标点,可用逗号分隔,也可以不用)
• stroke描边颜色
• fill填充颜色
  • fill 默认值是黑色,不设置fill为none会自动闭合线条进行填充(前提设置了stroke颜色值)

  <svg width="300" height="300" style="border: 1px solid red;">
    
    polyline>
  svg>
1
2
3
4
5
6
7
8
9

• 很好理解,从(10,10)出发,到(200,80),再从(200,80)到(230,230) (坐标系)

多边形polygon

多边形使用 标签，基础属性和 差不多：

• points: 点集
• stroke: 描边颜色
• fill: 填充颜色
  • 会自动闭合（自动将起始点和结束点链接起来）。

  <svg width="300" height="300" style="border: 1px solid red;">
    <polygon
      points="10 10 200 80 230 230"
      stroke="blue"
      fill="none"
    >polygon>
  svg>
1
2
3
4
5
6
7

path直线路径

其实在 SVG 里，所有基本图形都是 的简写。所有描述轮廓的数据都放在 d 属性里，d 是 data 的简写。

d 属性又包括以下主要的关键字（注意大小写！）：

• M: 起始点坐标，moveto 的意思。每个路径都必须以 M 开始。M 传入 x 和 y 坐标，用逗号或者空格隔开。
• L: 轮廓坐标，lineto 的意思。L 是跟在 M 后面的。它也是可以传入一个或多个坐标。大写的 L 是一个绝对位置。
• l: 这是小写 L，和 L 的作用差不多，但 l 是一个相对位置。
• H: 和上一个点的Y坐标相等，是 horizontal lineto 的意思。它是一个绝对位置。
• h: 和 H 差不多，但 h 使用的是相对定位。
• V: 和上一个点的X坐标相等，是vertical lineto 的意思。它是一个绝对位置。
• v: 这是一个小写的 v ，和大写 V 的差不多，但小写 v 是一个相对定位。
• Z: 关闭当前路径，closepath 的意思。它会绘制一条直线回到当前子路径的起点。

  <svg width="300" height="300" style="border: 1px solid red;">
    <path
      d="M 10 10 L 100 10 L 100 300"
      stroke="blue"
      fill="none"
    >
    path>
  svg>

如果全是使用大写 L 来描述每个点的位置，那可以把 L 也去掉，直接写点集,上面svg等同于下面
  <svg width="300" height="300" style="border: 1px solid red;">
    <path
      d="M 10 10 100 10 100 300"
      stroke="blue"
      fill="none"
    >
    path>
  svg>

你也可以添加逗号分隔下坐标,效果也是一样的
  <svg width="300" height="300" style="border: 1px solid red;">
    <path
      d="M 10 10, 100 10, 100 300"
      stroke="blue"
      fill="none"
    >
    path>
  svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

• 步骤,画笔落在坐标轴(10,10),绘制(10,10)到(100,10)的线条,再绘制(100,10)到(100,300)的线条

Z(闭合路径)

• 在 d 的数据集里，使用 Z 可以闭合路径。

• 注意要大写

  <svg width="300" height="300" style="border: 1px solid red;">
    <path
      d="M 10 10 L 100 10 L 100 300 Z"
      stroke="blue"
      fill="none"
    >
    path>
  svg>
1
2
3
4
5
6
7
8

l(轮廓坐标相对位置)

• 使用 L 的小写方式 l 可以实现相对位置写法。
  • l 里的参数会与前一个点的 x 和 y 进行相加，得到一个新的坐标。
  • 公式
  • 后一个坐标 = (前一个x坐标 + 现在x坐标,前一个y坐标 +现在y坐标)
• **也就是我从你这个位置出发,再次走多少距离,**而不是想绝对位置一样告诉你到哪里

  <svg width="300" height="300" style="border: 1px solid red;">
    <path
      d="M 10 10 l 90 0 l -10 300 Z"
      stroke="blue"
      fill="none"
    >
    path>
  svg>
1
2
3
4
5
6
7
8

• d="M 10 10 l 90 0 l -10 300 Z"等同于M 10 10 L 100 10 L 100 300 Z

H和h(y轴绝对和相对)

• H 后面只需传入 X坐标 即可，它的 Y坐标 与前一个点相同。
  • 不能写反了,必须要先H,在写入X坐标

  <svg width="310" height="300" style="border: 1px solid red;">
    
    <path
      d="M 10 0 H 300 Z"
      stroke="blue"
      fill="none"
    >
    path>
  svg>
1
2
3
4
5
6
7
8
9
10
11

• 上面的代码中，d="M 10 10 H 100" 等同于 d="M 10 10 L 100 10"

• 小h和小l作用差不多,都是从我这里开始出发,要走多少距离的意思
  • 小h传入的数据会和前一个点的 X坐标 相加
  • 公式
  • 后一个坐标 = (前一个x坐标 + 现在x坐标,前一个y坐标)
  • 相对谁,谁就不变

 //这里把width设置称为了310
<svg width="310" height="300" style="border: 1px solid red;">
    
    <path
      d="M 10 0 H 300  Z"
      stroke="blue"
      fill="none"
    >
    path>
  svg>
  <svg width="310" height="300" style="border: 1px solid red;">
    
    <path
      d="M 10 0 h 290 Z"
      stroke="blue"
      fill="none"
    >
    path>
  svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

V和v(x轴绝对和相对)

• V 后面只需传入 Y坐标 即可，它的 X坐标 与前一个点相同。
  • 公式
  • 后一个坐标 = (前一个x坐标,现在的y坐标)

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 V 100"
    stroke="blue"
    fill="none"
  >
  path>
svg>
1
2
3
4
5
6
7
8

• d="M 10 10 V 100"等同于d = "M 10 10 10 100"

• v 和 V 的作用差不多，小写 v 是一个相对位置。
  • 后一个坐标 = ( 现在x坐标,前一个y坐标 + 现在y坐标)
  • 相对谁,谁就不变

容易搞混怎么办?

• 记住H相对于Y轴,V相当与X轴
• 然后对应小写则是相加(减)与之相对坐标相反的,其他不用变
  • 比如小写h,大写的H是相对于Y轴,那么小写h计算坐标的时候就不要动y轴了,只变化x轴
  • 比如小写v,只需要变动y轴,x轴和他没关系,始终不变
• 相对谁,谁就不变

椭圆弧公式

• 用Illustrator去做

在 SVG 中可以使用 path 配合 A属性 绘制椭圆弧。

A(rx, ry, xr, laf, sf, x, y)
1

• rx: 椭圆X轴半径
• ry: 椭圆Y轴半径
• xr: 椭圆旋转角度
• laf: 是否选择弧长较长的那一段。0: 短边（小于180度）; 1: 长边（大于等于180度）
• sf: 是否顺时针绘制。0: 逆时针; 1: 顺时针
• x: 终点X轴坐标
• y: 终点Y轴坐标

设置样式的方法

设置 SVG 元素样式其实和 CSS 差不多，常见的方法有4种。

• 属性样式
• 内联样式
• 内部样式
• 外部样式

属性样式

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="pink"
  />
svg>
1
2
3
4
5
6
7
8
9

内联样式

把所有样式写在 style 属性里

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    style="fill: pink;"
  />
svg>
1
2
3
4
5
6
7
8
9

内部样式

将样式写在