SVG <path>

SVG đường dẫn - <path>

<path> Element được sử dụng để định nghĩa đường dẫn.

Các lệnh sau có thể được sử dụng cho dữ liệu đường dẫn:

  • M = moveto (di chuyển đến)
  • L = lineto (vẽ đường thẳng)
  • H = horizontal lineto (vẽ đường thẳng ngang)
  • V = vertical lineto (vẽ đường thẳng đứng)
  • C = curveto (đường cong)
  • S = smooth curveto (đường cong mượt mà)
  • Q = quadratic Bézier curve (đường cong Bézier hai次)
  • T = smooth quadratic Bézier curveto (đường cong Bézier hai次 mượt mà)
  • A = elliptical Arc (đường cong tròn)
  • Z = closepath (đóng đường dẫn)

Lưu ý: Tất cả các lệnh trên cũng có thể được viết bằng chữ thường. Chữ in hoa biểu thị vị trí tuyệt đối, chữ thường biểu thị vị trí tương đối.

Ví dụ 1

Ví dụ dưới đây định nghĩa một đường dẫn, vị trí bắt đầu là 150,0, sau đó vẽ một đường thẳng đến vị trí 75,200, tiếp theo từ đó vẽ một đường thẳng đến vị trí 225,200, cuối cùng đóng đường dẫn lại về vị trí 150,0.

Đây là mã SVG:

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

Thử nghiệm trực tiếp

Ví dụ 2

Đường cong Bézier (Bézier curves) được sử dụng để mô hình các đường cong mượt mà có thể thu phóng vô hạn. Thường thì người dùng chọn hai điểm cuối và một hoặc hai điểm điều khiển. Đường cong Bézier có một điểm điều khiển được gọi là đường cong Bézier hai次 (quadratic Bézier curve), đường cong Bézier có hai điểm điều khiển được gọi là đường cong Bézier ba lần (cubic).

Dưới đây là đường cong Bezier二次, trong đó A và C là điểm đầu và điểm cuối, B là điểm kiểm soát:

A B C

Đây là mã SVG:

<svg height="400" width="450">
  <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" />
  <!-- 标记相关的点 -->
  <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>
  <!-- 给点添加标签 -->
  <g font-size="30" font-family="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>

Thử nghiệm trực tiếp

Rất phức tạp phải không? Đúng vậy!!! Do đường dẫn vẽ rất phức tạp, tôi强烈 khuyến nghị sử dụng trình chỉnh sửa SVG để tạo hình ảnh phức tạp.