gtgt
0%

SVG中path的应用

发表于
SVG中path的应用

Path 语法

  • 字母 M（Move to）svg 中 path 的起点，后面跟着是一个坐标 xy.eg: M 20 20;
  • 字母 L（Line to）svg 中的直线命令，eg: L 30 30;
  • 字母 H 是 svg 中的水平线命令，后面跟着的是距离值。eg: H 100;
  • 字母 V 是 svg 中的垂直线命令，后面跟着的是距离值。eg: V 100;
  • 字母 Z 是 svg 中的闭合命令，放在 path 的最后面。eg: M 10 10 H 90 V 90 H 10 Z
1
2
3
4
// 绘制一个矩形
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</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
// path 实际项目中的应用：
// 给一个线段中间增加一个表示方向的箭头

const drawLineArrow = (x1, y1, x2, y2) => {
  let path = "";
  const Par = 12.0; // 箭头长度
  const angle = 1.8; // 箭头角度控制
  const slopy = Math.atan2(y1 - y2, x1 - x2); // 计算两点间连线的倾斜角

  // 三角函数值
  const cosy = Math.cos(slopy);
  const siny = Math.sin(slopy);

  // 中心点位置（已知两个点，求中间点坐标）
  const x3 = (Number(x1) + Number(x2)) / 2;
  const y3 = (Number(y1) + Number(y2)) / 2;

  path += ` M${x3},${y3}`;
  path += ` L${Number(x3) + Number(Par * cosy - (Par / angle) * siny)},${Number(y3) +
    Number(Par * siny + (Par / angle) * cosy)}`;

  path += ` L${Number(x3) + Number(Par * cosy + (Par / angle) * siny)},${Number(y3) -
    Number((Par / angle) * cosy - Par * siny)}`;
  path += ` L${x3},${y3}`;

  return path;
};