svg学习归纳

svg 用于包裹着整个矢量图。其默认宽高为300px和150px
path 定义路径。可以理解为：指定坐标点，指定他们的连接方式。

M 用于起始点,x y
L (绝对位置x y) ,l(起始点的相对位置x,y),画直线
Q 二阶贝塞尔曲线,x1 y1 x y
H 和上一个点的Y坐标相等,它是一个绝对位置。
h 和 H 差不多，但 h 使用的是相对定位。
V 和上一个点的X坐标相等，是vertical lineto 的意思。它是一个绝对位置。
v 这是一个小写的 v ，和大写 V 的差不多，但小写 v 是一个相对定位。
Z 关闭当前路径，closepath 的意思。它会绘制一条直线回到当前子路径的起点。

// 简写d="M 10 10 50 40 100 10" 等同于 d="M 10 10 L 50 40 L 100 10"
//  d="M 10 10 L 50 40 L 100 10 Z", 使用 Z 可以闭合路径
// 偏移点在(50, 0)，在(50, 50)结束，我们用二阶贝塞尔曲线表达出来：Q 50 0 50 50
// d="M 10 10 l 50 40 l 100 10 Z" 等同于 d="M 10 10 L 60 50 L 160 60 Z" 。

circle 圆形元素。这个我们仅记一点即可：圆心(cx, cy) + 半径(r)～
rect x,y,width,height, rx(圆角x 轴的半径), ry( 圆角，y 轴的半径)
ellipse 椭圆，圆心(cx, cy), rx(x轴的半径),ry(y轴的半径)
line 直线(x1,y1,x2,y2)起始点坐标, stroke(必须设置)线的颜色，strokeWidth线宽
polyline 折线 points(x1,y1,x2,y2....)连线坐标点集合, stroke(必须设置)线的颜色，fill填充...
polygon 多边形，points(x1,y1,x2,y2....)连线坐标点集合，stroke: 描边颜色
，fill: 填充颜色，会自动闭合（自动将起始点和结束点链接起来）。
marker 标记使用。它需要包裹在元素中。
defs 用于实现 svg 的复用，其内容不使用时是不可见的。将需要复用的图形用该标签包裹，通过标签来使用即可。
g 其实就是 group 的意思，也就是一个集合，图形组合用进行包裹
text

text-decoration 装饰线(none：默认,underline: 下划线,overline: 上划线,line-through: 删除线)
text-anchor 水平对齐方式(start,middle,end)
多行文本

<svg width="400" height="400" style="border: 1px solid red;">
  <text fill="blue">
    <tspan x="10" y="30" fill="red">雷猴</tspan>
    <tspan x="10" y="60">鲨鱼辣椒</tspan>
    <tspan x="10" y="90">蟑螂恶霸</tspan>
  </text>
</svg>

dominant-baseline 垂直对齐方式 (...)
writing-mode 纵向文字

超链接

<svg width="400" height="400" style="border: 1px solid red;">
  <a xlink:href="https://juejin.cn/post/7116784455561248775" xlink:title="canvas" target="_blank">
    <text x="20" y="20">Canvas</text>
  </a>
</svg>

image

<svg width="400" height="400" style="border: 1px solid red;">
  <image xlink:href="./img.jpg"></image>
</svg>

常用样式设置

fill填充
fill-opacity 填充色的不透明度
stroke 描边颜色
stroke-opacity 描边颜色的不透明度
stroke-width 描边宽度
stroke-dasharray 虚线描边(x,y..线的长度和空隙的长度)
stroke-dashoffset 虚线偏移量
stroke-linecap 线帽
stroke-linejoin 拐角
shape-rendering 消除锯齿

案例

案例 1

<svg>
    <defs>
          <g id="icon">
            <line x1="0" y1="10" x2="20" y2="10"
              stroke= "#000" strokeWidth = "2px"
            />
            <line x1="10" y1="0" x2="10" y2="20"
              stroke= "#000" strokeWidth = "2px"
            />
          </g>
    </defs>
     {/*   用 use标签+id 来使用我们的图标组合  */}
    <use href="#icon"></use>
      </svg>

案例 2，曲线，圆头三角形结尾

<svg height="400px">
        {/* 复用性 */}
        <defs>
          {/* 根据三角形的大小，这里设置 markerWidth，markerHeight的值为10 , refY, refX位置移动 ,orient标记随着线的曲率角度偏移*/}
          <marker id="triangle" markerWidth="10" markerHeight="10" refY="5" orient="auto">
            <path d="M0 0 L10, 5 L0 10" fill="#000"></path>
          </marker>
          {/* 圆 */}
          <marker id="circle" markerWidth="10" markerHeight="10" refY="5" refX="5">
            <circle cx="5" cy="5" r="5" fill="#000"></circle>
          </marker>
        </defs>
        <path d="M10 10
         L25 10
         Q50 10 50 25
         L50 50
         Q50 100 100 160"
        stroke="#000"
        strokeWidth="2px"
        fill= "none"
        // 虚线，长度与间隔
        strokeDasharray="3 3"
        // 线的末端添加三角形箭头
        markerEnd= "url(#triangle)"
        markerStart= "url(#circle)"
        />
      </svg>

案例3 path 配合 A属性绘制椭圆弧。

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 width="400" height="400" style="border: 1px solid red;">
  <!-- 红 -->
  <path
    d="M 125 75 A 100 50 0 0 0 225 125"
    stroke="red"
    fill="none"
  />

  <!-- 黄 -->
  <path
    d="M 125 75 A 100 50 0 0 1 225 125"
    stroke="yellow"
    fill="none"
  />
</svg>