SVG z-index không hoạt động? Sửa thứ tự đường dẫn

Nếu đường dẫn SVG vẫn nằm sau hình khác khi bạn tăng z-index CSS, hãy kiểm tra thứ tự phần tử trong SVG. Theo thứ tự vẽ SVG thông thường, hình xuất hiện trước được tô vẽ trước và hình xuất hiện sau che lên nó. Để đưa đường dẫn lên trước, đặt nó sau những hình mà nó cần che. Mô hình kết xuất SVG định nghĩa thứ tự đó.

Trước hết, xác định phần chồng lấp nằm ở đâu. Toàn bộ SVG nằm sau phần đầu trang là vấn đề bố cục HTML; hai hình trong cùng SVG là vấn đề thứ tự hình. Cách sửa bên dưới dành cho trường hợp thứ hai.

Quan sát khác biệt trên cùng một biểu tượng

Chúng tôi vẽ một biểu tượng gốc gồm ba phần: ngôi sao cam, đĩa xanh lam và dải ruy băng xanh lá. Trong khung bên trái, ngôi sao đứng trước trong SVG và có CSS position: relative cùng z-index: 999. Trình duyệt tính ra giá trị z-index đó, nhưng đĩa và dải ruy băng xuất hiện sau vẫn che ngôi sao. Trong khung bên phải, chỉ thứ tự phần tử thay đổi: cùng ngôi sao đó đứng cuối và hiện phía trước.

Phép thử dùng HeadlessChrome 141 với ảnh chụp 1200 × 680. Thứ tự phần tử con được báo là ngôi sao, đĩa, ruy băng bên trái và đĩa, ruy băng, ngôi sao bên phải. Đây là phép thử hẹp cho các phần tử con SVG chồng lấp thông thường, không phải cam kết cho mọi trình kết xuất, nhóm lồng nhau hay hiệu ứng.

Sửa thứ tự trong tệp SVG

Mở nguồn SVG trong trình soạn thảo văn bản hoặc kiểm tra đối tượng trong trình chỉnh sửa vector. Tìm các hình chồng lấp rồi đọc từ trên xuống dưới trong tệp. Phần tử cùng cấp đứng trước được tô vẽ trước. Di chuyển đối tượng cần hiện phía trước xuống sau các đối tượng mà nó phải che, rồi lưu một bản sao.

Ví dụ, bản vẽ đơn giản này đặt ngôi sao cuối cùng:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
  <circle cx="120" cy="80" r="55" fill="#4f86df"/>
  <path d="M20 90 Q110 60 220 100 L220 125 Q110 85 20 115Z"
        fill="#22a79a"/>
  <path id="star" d="M120 20 L135 60 175 62 145 88 155 130
           120 108 85 130 95 88 65 62 105 60Z"
        fill="#ff8c64"/>
</svg>

Dữ liệu đường dẫn và màu tô không cần thay đổi cho cách sửa này. Nếu ứng dụng thiết kế có lệnh Bring to Front, hãy xuất SVG sau đó và kiểm tra mã đã lưu hoặc mở lại tệp. Bảng lớp hiển thị trong trình chỉnh sửa rất hữu ích, nhưng tệp bàn giao mới là thứ trình kết xuất tiếp theo đọc.

Với SVG tương tác, JavaScript có thể chuyển phần tử con hiện có xuống cuối phần tử cha hiện tại:

const star = document.querySelector("#star");
star.parentNode.appendChild(star);

Tài liệu appendChild của MDN xác nhận rằng thêm một nút đã tồn tại vào cuối sẽ di chuyển nó, thay vì tạo bản sao thứ hai. Chỉ dùng cách này khi thay đổi DOM là một phần của ứng dụng. Với tệp logo tĩnh, đặt thứ tự mong muốn ngay trong SVG thường rõ ràng hơn.

Kiểm tra nhóm, lỗ và các loại thứ tự khác

Nếu ngôi sao thuộc một nhóm, chuyển nó xuống cuối bên trong nhóm đó vẫn có thể khiến toàn bộ nhóm nằm sau một nhóm cùng cấp xuất hiện sau. Kiểm tra cấu trúc cha. Di chuyển nhóm tương ứng khi toàn bộ hình trong nhóm cần lên trước; đổi thứ tự các phần tử con khi chỉ những phần bên trong nhóm chồng lấp. Cẩn thận khi đưa phần tử con ra khỏi nhóm: nhóm có thể mang phép biến đổi, cắt, độ mờ đục hoặc mặt nạ. Phần về nhóm trong mô hình kết xuất SVG giải thích vì sao nội dung theo nhóm được kết xuất cùng nhau.

Sửa thứ tự đối tượng cũng không thể sửa một lỗ hay khe hở thực trong hình học đường dẫn. Nếu tâm chữ hoặc biểu tượng bị lấp sau khi xuất, hãy kiểm tra hình và tệp đích. Một đối tượng không trong suốt xuất hiện sau có thể chỉ đang che lỗ. Hướng dẫn về lỗ SVG giúp tách trường hợp đó khỏi vấn đề quy tắc tô màu hay đường bao. Nếu thay vào đó có đường trắng mảnh giữa các hình liền kề, dùng chẩn đoán khe hở trước khi đổi thứ tự xếp chồng.

Cuối cùng, paint-order là thiết lập khác. Nó thay đổi thời điểm tô vẽ màu tô, đường viền và marker của một phần tử; nó không đặt phần tử đó lên trên đường dẫn lân cận. Tài liệu paint-order của MDN định nghĩa phạm vi ấy. Dùng hướng dẫn paint-order khi đường viền dày che màu tô của chính nó, thay vì khi một phần màu của logo che phần khác.

CSS z-index vẫn có ý nghĩa với hộp HTML được định vị và các mục flex hoặc grid, như MDN mô tả. Hãy phân biệt trường hợp bố cục trang đó với thứ tự đường dẫn lưu bên trong SVG.

Quy trình này với PerfectVector

Dùng bản SVG gốc hiện có nếu bạn có. Vector hóa lại sẽ tạo một tập hình mới mà không giải quyết quyết định về lớp. Nếu nguồn duy nhất là logo PNG hoặc JPG đã làm phẳng, PerfectVector có thể giúp ở bước trước: chuyển ảnh thành một bản SVG để đánh giá, rồi kiểm tra các phần riêng và chỗ chồng lấp trong trình chỉnh sửa. Đưa những đường dẫn khôi phục về thứ tự mong muốn trước khi bàn giao. Việc chuyển đổi không tự chỉ định đối tượng phía trước trong thiết kế, cũng không bảo đảm lỗ nhỏ còn nguyên sau khi đồ lại.

Khi ảnh nguồn có nhòe, bóng hoặc chữ rất nhỏ, vẽ lại thủ công những chi tiết đó có thể đáng tin cậy hơn đồ lại. Hướng dẫn chỉnh sửa SVG rộng hơn trình bày việc dọn đường dẫn sau chuyển đổi.

Xác minh tệp bạn sẽ bàn giao

1. Lưu một bản sao SVG nguồn và chỉ đổi thứ tự đối tượng hoặc nhóm cần thiết.
2. Mở tệp đã lưu trong trình duyệt ở kích thước mà chỗ chồng lấp quan trọng. So sánh với thiết kế nguồn.
3. Mở lại trong trình chỉnh sửa hoặc ứng dụng đích. Kiểm tra cùng chỗ chồng lấp, cùng các mặt nạ, vùng bị cắt và lỗ.
4. Nếu SVG có tương tác, thử hành vi con trỏ và rê chuột sau khi đổi thứ tự. Hình mới nằm trên cùng có thể nhận tương tác ở nơi trước đó hình khác nhận.
5. Nếu kết quả chỉ sai ở một mức thu phóng hoặc kích thước xuất, kiểm tra đường nối do lấy mẫu hay khe hở thực trước khi di chuyển thêm đối tượng.

Với nguồn chỉ có raster, tạo một bản SVG để đánh giá bằng PerfectVector, rồi kiểm tra thứ tự đường dẫn, các lỗ và kết quả hiển thị đã lưu ở kích thước mong muốn. Nếu tệp đã chứa đúng các hình vector, hãy bắt đầu bằng đổi thứ tự.

Câu hỏi thường gặp

Tôi có thể dùng CSS z-index để đưa một đường dẫn SVG lên trước không? Với các hình cùng cấp thông thường bên trong một SVG, hãy chuyển đường dẫn xuống sau trong thứ tự tài liệu SVG. CSS z-index tác động đến các hộp trang xung quanh không đổi thứ tự những hình con đó một cách đáng tin cậy.

paint-order có thay đổi đối tượng SVG nào nằm trên cùng không? Không. Paint-order thay đổi thứ tự màu tô, đường viền và marker trong một hình hoặc phần tử văn bản. Đổi thứ tự các đối tượng riêng để thay đổi đối tượng nào che đối tượng nào.

Vì sao đường dẫn vẫn bị che khi tôi đã chuyển nó xuống cuối nhóm? Toàn bộ nhóm của nó có thể nằm sau nhóm khác. Kiểm tra các nhóm cha cùng phép biến đổi, cắt, mặt nạ hoặc độ mờ đục trước khi đưa phần tử con ra khỏi nhóm.

Nguồn tham khảo

1. W3C — Mô hình kết xuất SVG 1.1 — Định nghĩa thứ tự tô vẽ phần tử trong tài liệu SVG.
2. MDN — Node.appendChild() — Mô tả cách phần tử con DOM hiện có di chuyển khi được thêm vào cuối.
3. MDN — Thuộc tính paint-order của SVG — Giới hạn paint-order trong màu tô, đường viền và marker của một hình.
4. MDN — Thuộc tính CSS z-index — Giải thích z-index cho các mục được định vị và bố cục trong xếp chồng trang.
5. W3C — Mô hình kết xuất SVG 2 — Mô tả ngữ cảnh xếp chồng SVG, nhóm và xác định đích con trỏ.