練習30天SVG之基礎開篇path標籤（part6）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41406727/article/details/89924692

博客主要介绍了<path>元素，其用于定义一个路径。详细列出了用于路径数据的命令，如M、L、H等，还说明了大小写字母表示绝对和相对定位的区别。此外，通过具体例子展示了<path>元素在绘制图形（如直角三角形）时的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<path> 元素

定義：定義一个路径

下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

栗子一：直角3角型

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000px" height="600px">
    <path d="M200 0 L0 200 H200 Z"/>
</svg>

結果：

栗子二：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000px" height="400px">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

結果：

說明：

<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />

中的M 100 350為開始x為100，y軸為350，然後畫直線 l X為150y為 -300；

<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />

中的M 100 350 q 150 -300 300 0為開始x為100，y為350；然後畫一個曲線用q，x為150，y為-300；結束為x為300，y為0