目标

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

rect矩形

矩形使用 <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>

圆circle

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

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

1
2
3

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

ellipse椭圆

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

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

<ellipse> 和 <circle> 差不多，只是将半径拆成x轴和y轴的。

line线条

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

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

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

<svg width="300" height="300" style="border: 1px solid red;">
  <line
    x1="0"
    y1="0"
    x2="100"
    y2="100"
    stroke="black"
  ></line>
</svg>

polyline折线

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

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

<svg width="300" height="300" style="border: 1px solid red;">
  <polyline
    //效果相同points="10 10, 200 80, 230 230"
    points="10 10 200 80 230 230"
    stroke="blue"
    fill="none"
  >
  </polyline>
</svg>

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

多边形polygon

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

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

<svg width="300" height="300" style="border: 1px solid red;">
  <polygon
    points="10 10 200 80 230 230"
    stroke="blue"
    fill="none"
  ></polygon>
</svg>

path直线路径

其实在 SVG 里，所有基本图形都是 <path> 的简写。所有描述轮廓的数据都放在 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>

步骤,画笔落在坐标轴(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>

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>

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;">
  <!-- 等同于d="M 10 0 L 100 0  Z"
      (10,0) 到 (300,0)
  -->
  <path
    d="M 10 0 H 300 Z"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

上面的代码中，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;">
    <!-- 等同于d="M 10 0 L 100 0  Z"
        (10,0) 到 (300,0)
    -->
    <path
      d="M 10 0 H 300  Z"
      stroke="blue"
      fill="none"
    >
    </path>
  </svg>
  <svg width="310" height="300" style="border: 1px solid red;">
    <!-- 
      坐标计算
      (10,0) 到 (290 + 10,0)
    -->
    <path
      d="M 10 0 h 290 Z"
      stroke="blue"
      fill="none"
    >
    </path>
  </svg>

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>

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属性 绘制椭圆弧。

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

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>

内联样式

把所有样式写在 style 属性里

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    style="fill: pink;"
  />
</svg>

内部样式

将样式写在 <style> 标签里,为标签添加类名或者其他,通过选择器进行样式更改

<style>
  .rect {
    fill: pink;
  }
</style>

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    class="rect"
  />
</svg>

外部样式

将样式写在 .css 文件里，然后在页面中引入该 CSS 文件。

常用的属性

接下来讲到的所有常规属性，除了在元素属性上设置之外，都支持在 CSS 中设置。
fill填充颜色
fill-opacity填充透明度
- 取值是 0 - 1，0 代表完全透明，1 代表完全不透明。小于 0 的值会被改为 0，大于 1 的值会被改为 1
stroke描边颜色
stroke-opacity描边的不透明度
stroke-width描边的宽度
stroke-dasharray虚线描边
stroke-dashoffset虚线偏移量
stroke-linecap线帽
- butt: 平头（默认值）
- round: 圆头
- square: 方头