path()
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
* Some parts of this feature may have varying levels of support.
Hàm path() trong CSS là một hàm nhận vào một chuỗi đường dẫn SVG, được dùng trong các module CSS shapes và CSS motion path để vẽ một hình dạng. Hàm path() là giá trị kiểu dữ liệu <basic-shape>. Nó có thể được dùng trong thuộc tính CSS offset-path và clip-path, cũng như trong thuộc tính SVG d.
Có một số hạn chế khi dùng hàm path(). Đường dẫn phải được định nghĩa dưới dạng một chuỗi duy nhất, vì vậy không thể tạo đường dẫn tùy chỉnh bằng biến (hàm var()). Ngoài ra, tất cả độ dài trong đường dẫn đều được định nghĩa ngầm định theo đơn vị pixel (px); không thể dùng các đơn vị khác. Hàm shape() cung cấp nhiều tính linh hoạt hơn so với hàm path().
Try it
clip-path: path(
"M 20 240 \
L 20 80 L 160 80 \
L 160 20 L 280 100 \
L 160 180 L 160 120 \
L 60 120 L 60 240 Z"
);
clip-path: path(
"M 20 240 \
C 20 0 300 0 300 240 Z"
);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#default-example {
background: #ffee99;
}
#example-element {
background: linear-gradient(to bottom right, #ff5522, #0055ff);
width: 100%;
height: 100%;
}
Cú pháp
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")
/* Chỉ khi dùng trong clip-path */
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")
Tham số
<fill-rule>Optional-
Xác định phần nào của đường dẫn nằm bên trong hình dạng. Các giá trị có thể bao gồm:
-
nonzero: Một điểm được coi là nằm bên trong hình dạng nếu tia vẽ từ điểm đó đi qua nhiều đoạn đường từ trái sang phải hơn là từ phải sang trái, tạo ra kết quả khác không. Đây là giá trị mặc định khi<fill-rule>bị bỏ qua. -
evenodd: Một điểm được coi là nằm bên trong hình dạng nếu tia vẽ từ điểm đó đi qua một số lẻ đoạn đường. Điều này có nghĩa là mỗi lần tia đi vào hình dạng, nó chưa thoát ra một số lần bằng nhau, cho thấy số lần vào lẻ mà không có lối ra tương ứng.
Warning:
<fill-rule>không được hỗ trợ trongoffset-pathvà việc sử dụng nó sẽ làm thuộc tính không hợp lệ. -
<string>-
Một chuỗi dữ liệu, đặt trong dấu ngoặc kép, định nghĩa một đường dẫn SVG. Chuỗi dữ liệu đường dẫn SVG chứa các lệnh đường dẫn ngầm định sử dụng đơn vị pixel. Đường dẫn rỗng được coi là không hợp lệ.
Giá trị trả về
Trả về một giá trị <basic-shape>.
Cú pháp chính thức
<path()> =
path( <'fill-rule'>? , <string> )
<fill-rule> =
nonzero |
evenodd
Ví dụ
Sử dụng hàm path() làm giá trị offset-path
Hàm path() được dùng làm giá trị offset-path trong ví dụ sau để tạo đường dẫn hình elip cho một quả bóng di chuyển theo.
<div id="path">
<div id="ball"></div>
</div>
<button>animate</button>
#path {
margin: 40px;
width: 400px;
height: 200px;
/* vẽ đường dốc màu xám */
background: radial-gradient(at 50% 0%, transparent 70%, grey 70%, grey 100%);
}
#ball {
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
/* đánh dấu đường dẫn hình elip */
offset-path: path("M 15 15 A 6 5.5 10 0 0 385 15");
}
const btn = document.querySelector("button");
const ball = document.getElementById("ball");
btn.addEventListener("click", () => {
btn.setAttribute("disabled", true);
setTimeout(() => btn.removeAttribute("disabled"), 6000);
ball.animate(
// hoạt hình offset path
{ offsetDistance: [0, "100%"] },
{
duration: 1500,
iterations: 4,
easing: "cubic-bezier(.667,0.01,.333,.99)",
direction: "alternate",
},
);
});
Thay đổi giá trị thuộc tính d của đường dẫn SVG
Hàm path() có thể dùng để thay đổi giá trị của thuộc tính d trong SVG, thuộc tính này cũng có thể được đặt thành none trong CSS.
Ký hiệu "V" sẽ lật theo chiều dọc khi bạn di chuột qua nó, nếu d được hỗ trợ dưới dạng thuộc tính CSS.
CSS
html,
body,
svg {
height: 100%;
}
/* Đường dẫn này được hiển thị khi hover */
#svg_css_ex1:hover path {
d: path("M20,80 L50,20 L80,80");
}
HTML
<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-path |
Khả năng tương thích trình duyệt
Xem thêm
<shape-outside>- Module CSS shapes
- Tổng quan về CSS shapes
- Cú pháp đường dẫn SVG
path: hướng dẫn minh họa trên CSS-tricks (2021)