d

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính d xác định một đường dẫn sẽ được vẽ.

Một định nghĩa đường dẫn là một danh sách các lệnh đường dẫn, trong đó mỗi lệnh gồm một ký tự lệnh và các số đại diện cho tham số của lệnh. Các lệnh này được mô tả chi tiết bên dưới.

Thuộc tính này được dùng với phần tử SVG <path>.

d là một presentation attribute, và do đó cũng có thể được dùng như một thuộc tính CSS.

Ví dụ

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

path

Đối với <path>, d là một chuỗi chứa một loạt lệnh đường dẫn xác định đường dẫn sẽ được vẽ.

Giá trị	<string>
Giá trị mặc định	không có
Có thể animate	Có

Dùng d như một thuộc tính CSS

d là một presentation attribute, và do đó cũng có thể được sửa đổi bằng CSS. Thuộc tính này nhận hoặc path() hoặc none.

Ví dụ dưới đây cho thấy cách bạn có thể áp dụng một đường dẫn mới khi hover lên một phần tử. Đường dẫn mới giống như đường dẫn cũ, nhưng thêm một đường thẳng ngang qua hình trái tim.

css

html,
body,
svg {
  height: 100%;
}

/* This path is displayed on hover */
#svg_css_ex1:hover path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
  );
}

html

<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z
       " />
</svg>

Để xem ví dụ hoạt ảnh cho <path>, hãy xem trang tham chiếu thuộc tính CSS d.

Các lệnh đường dẫn

Các lệnh đường dẫn là các chỉ dẫn xác định một đường dẫn sẽ được vẽ. Mỗi lệnh gồm một ký tự lệnh và các số đại diện cho tham số của lệnh.

SVG định nghĩa 6 loại lệnh đường dẫn, tổng cộng 20 lệnh:

MoveTo: M, m
LineTo: L, l, H, h, V, v
Cubic Bézier curve: C, c, S, s
Quadratic Bézier curve: Q, q, T, t
Elliptical arc curve: A, a
ClosePath: Z, z

Note: Các lệnh là phân biệt chữ hoa chữ thường. Một lệnh viết hoa chỉ định tọa độ tuyệt đối, trong khi lệnh viết thường chỉ định tọa độ tương đối so với vị trí hiện tại.

Luôn có thể chỉ định một giá trị âm làm đối số cho một lệnh:

góc âm sẽ quay ngược chiều kim đồng hồ;
các giá trị x và y âm tuyệt đối được hiểu là tọa độ âm;
các giá trị x âm tương đối di chuyển sang trái, và các giá trị y âm tương đối di chuyển lên trên.

Các chỉ dẫn MoveTo có thể được hiểu như việc nhấc dụng cụ vẽ lên, rồi đặt nó xuống một nơi khác - nói cách khác, di chuyển điểm hiện tại (P_o; {x_o, y_o}). Không có đường nào được vẽ giữa P_o và điểm hiện tại mới (P_n; {x_n, y_n}).

Lệnh Tham số Ghi chú

Lệnh	Tham số	Ghi chú
M	(`x`, `y`)+	Di chuyển điểm hiện tại tới tọa độ `x`,`y`. Mọi cặp tọa độ tiếp theo được hiểu là tham số cho các lệnh LineTo tuyệt đối ngầm định (`L`) (xem bên dưới). Công thức: `P_n` = {`x`, `y`}
m	(`dx`, `dy`)+	Di chuyển điểm hiện tại bằng cách dời vị trí đã biết cuối cùng của đường đi theo `dx` dọc trục x và theo `dy` dọc trục y. Mọi cặp tọa độ tiếp theo được hiểu là tham số cho các lệnh LineTo tương đối ngầm định (`l`) (xem bên dưới). Công thức: `P_n` = {`x_o` + `dx`, `y_o` + `dy`}

(x, y)+

Di chuyển điểm hiện tại tới tọa độ x,y. Mọi cặp tọa độ tiếp theo được hiểu là tham số cho các lệnh LineTo tuyệt đối ngầm định (L) (xem bên dưới).

Công thức: P_n = {x, y}

(dx, dy)+

Di chuyển điểm hiện tại bằng cách dời vị trí đã biết cuối cùng của đường đi theo dx dọc trục x và theo dy dọc trục y. Mọi cặp tọa độ tiếp theo được hiểu là tham số cho các lệnh LineTo tương đối ngầm định (l) (xem bên dưới).

Công thức: P_n = {x_o + dx, y_o + dy}

Ví dụ

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 40,20 h 10
       m  0,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 50,50 h 10
       m-20,10 h 10
       m-20,10 h 10
       m-20,10 h 10" />
</svg>

Các lệnh LineTo

Các chỉ dẫn LineTo vẽ một đường thẳng từ điểm hiện tại (P_o; {x_o, y_o}) tới điểm cuối (P_n; {x_n, y_n}), dựa trên các tham số được chỉ định. Điểm cuối (P_n) sau đó trở thành điểm hiện tại cho lệnh tiếp theo (P_o′).

Lệnh Tham số Ghi chú

Lệnh	Tham số	Ghi chú
L	(`x`, `y`)+	Vẽ một đường thẳng từ điểm hiện tại đến điểm cuối được chỉ định bởi `x`,`y`. Mọi cặp tọa độ tiếp theo được hiểu là tham số cho các lệnh LineTo tuyệt đối ngầm định (`L`). Công thức: `P_o′` = `P_n` = {`x`, `y`}
l	(`dx`, `dy`)+	Vẽ một đường thẳng từ điểm hiện tại đến điểm cuối được xác định bởi dịch chuyển tương đối từ `dx` theo trục x và `dy` theo trục y. Mọi cặp tọa độ tiếp theo được hiểu là tham số cho các lệnh LineTo tương đối ngầm định (`l`). Công thức: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`}

(x, y)+

Vẽ một đường thẳng từ điểm hiện tại đến điểm cuối được chỉ định bởi x,y. Mọi cặp tọa độ tiếp theo được hiểu là tham số cho các lệnh LineTo tuyệt đối ngầm định (L).

Công thức: P_o′ = P_n = {x, y}

(dx, dy)+

Vẽ một đường thẳng từ điểm hiện tại đến điểm cuối được xác định bởi dịch chuyển tương đối từ dx theo trục x và dy theo trục y. Mọi cặp tọa độ tiếp theo được hiểu là tham số cho các lệnh LineTo tương đối ngầm định (l).

Công thức: P_o′ = P_n = {x_o + dx, y_o + dy}

Ví dụ

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M10 10 L90 10 L90 90 L10 90 Z" />
</svg>

Thông số kỹ thuật

Specification
Scalable Vector Graphics (SVG) 2 # DProperty
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementDAttribute
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # DAttribute

Xem thêm

SVG animation with SMIL

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content