svg中path的直线命令使用

path路径

<path>元素是SVG基本形状中最强大的一个。可以使用它来创建线条，曲线，弧形等等。

另外，path只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然polygon元素也可以实现类似的效果，但是必须设置大量的点（点越密集，越接近连续，看起来越平滑流畅），这种做法不能够放大（放大后，点的离散更明显）。所以在绘制SVG时，对路径的良好理解更重要。

path元素的形状是通过属性d定义的，属性d的值是一个“命令 + 参数”的序列。

每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面，是你需要移动到的那个点的 x 和 y 轴坐标。比如移动到（10， 10）这个点的命令。应该写成M 10 10 。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种使用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位（例如，从上一个点开始，向上移动10px，向左移动7px）。

• 绝对定位：大写字母 x y
• 相对定位：小写字母 dx dy

因为属性d采用的是用户坐标系统，所以不需要标明单位。

命令

直线命令

<path>元素里有5个画直线的命令，顾名思义，直线命令就是在两个点之间画直线。首先是Move to命令。

M需要两个参数，分别是需要移动到的点的x和y轴的坐标。

假设，你的画笔当前位于一个点，在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。因为M命令仅仅只是移动画笔，但不画线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。

M x y
(or)
m dx dy

能够真正画出线的命令有三个

• L（Line to） x y
• H x
• V y

最常用的是Line to命令，L， L命令需要两个参数，分别是一个点的 x 轴和 y 轴坐标，L命令将会在当前位置和新位置（L 前面画笔所在的点）之间画一条线段。

L x y
(or)
l dx dy

另外还有两个简写命令，用来绘制水平线和垂直线。

H绘制水平线，V，绘制垂直线。这两个命令都只带一个参数，标明在 x 轴或 y 轴移动到的位置，因为他们都只在坐标轴的一个方向上移动。

H x
(or)
h dx
V y
(or)
v dy

demo 用直线命令画一个div边框

效果

代码实现

<svg
      class="dv-border-svg-container17"
      height="150%"
      width="150%"
      x="-25%"
      y="-25%"
    >
      <path
        fill="transparent"
        stroke="#18a2af"
        stroke-width="2"
        d="M 10 10
        H 150
        L 160 20
        H 260
        L 270 30
        H 320
        L 330 20
        H 495
        L 500 25
        V 395
        L 495 400
        H 200
        L 190 390
        H 100
        L 90 400
        H 5
        L 0 395
        V 160
        L 5 155
        V 110
        L 10 105
        V 60
        L 5 55
        V 15
        L 10 10"
      />

    </svg>