Vì sao lỗ SVG bị tô kín và cách khôi phục

Lỗ SVG bị tô khi tệp hoặc ứng dụng đích không còn xem đường bao trong là phần nằm ngoài hình được tô. Nguyên nhân thường là đường dẫn ghép bị tách, đường bao trong lưu thành đối tượng tô riêng, quy tắc tô hoặc hướng đường dẫn đổi, công cụ nhập bỏ quan hệ hoặc kết quả đồ raster đóng khoảng rỗng trước khi tạo SVG.

Bắt đầu bằng cách mở SVG trong trình duyệt. Nếu lỗ đã bị tô ở đó, sửa tệp. Nếu trình duyệt đúng nhưng ứng dụng khác tô lỗ, bước nhập có khả năng là lỗi.

Trước tiên tìm nơi lỗ biến mất

Dùng hai trình kết xuất trước khi đổi hình học:

1. Lưu bản sao SVG.
2. Mở trực tiếp bản sao trong Chrome, Safari, Firefox hoặc trình duyệt khác.
3. Đặt trên cả nền sáng và tối.
4. Mở cùng tệp trong ứng dụng đích.
5. So đúng lỗ đó, không chỉ hình bóng tổng thể.

So sánh này tách SVG sai khỏi vấn đề nhập riêng của ứng dụng đích. Nó cũng ngăn thao tác đường dẫn ngẫu nhiên làm hỏng tệp vốn đúng trước khi nhập.

Hình trắng không phải lỗ

Lỗ thực cho thấy mọi thứ phía sau SVG. Hình trắng chỉ trông trống trên khung trắng. Với hình dùng trong giao diện web, hướng dẫn pointer-events SVG cho thấy lỗ, vùng được tô và đích tương tác riêng phản hồi nhấp chuột thế nào.

Để thử, thêm hình chữ nhật tối tạm thời sau hình. Nếu lỗ giả vẫn trắng, chọn đối tượng trong đó. Bạn có thể giữ nó như yếu tố thiết kế trắng có chủ đích, nhưng đừng kỳ vọng máy cắt, công cụ khắc, lớp phủ trình duyệt hoặc công cụ nhập 3D hiểu nó là khoảng trống.

Với khoảng rỗng trong suốt, dùng đường dẫn ghép hoặc trừ hình trong khỏi hình ngoài. Mặt nạ cũng tạo độ trong suốt, nhưng nhiều ứng dụng sản xuất xử lý hình học đường dẫn đơn giản đáng tin cậy hơn mặt nạ. Với quy trình script, thử cắt và nối đường dẫn nhập bằng Paper.js, rồi mở lại SVG xuất để kiểm tra khoảng rỗng.

Với hình gobo, khoảng rỗng trong suốt đúng vẫn để lại quyết định vật liệu riêng. So sánh gobo thép và kính theo cùng chữ O qua bố cục cầu nối thép và thiết kế được kính đỡ, đồng thời giải thích vì sao đảo vùng sáng/tối chiếu ra thay đổi phần nào phải giữ gắn nhau.

Đường dẫn ghép mang quan hệ lỗ

Chữ O, vòng và logo khoét tâm thường dùng một phần tử đường dẫn có nhiều đường dẫn con khép kín. Đường bao ngoài định nghĩa hình bóng; đường dẫn con bên trong định nghĩa khoảng rỗng chữ hoặc phần khoét. Mô hình đường dẫn SVG cho phép nhiều đường dẫn con trong một đường dẫn.

Vì vậy, Ungroup, Break Apart và Release Compound Path không thay thế nhau. Tách đường dẫn ghép có thể biến đường bao trong thành đối tượng tô thông thường. Hình học vẫn có, nhưng quan hệ với đường bao ngoài đã mất.

Khôi phục trên bản sao:

1. Chọn ranh giới ngoài và chỉ những đường bao cần thành lỗ.
2. Dùng Make Compound Path, Combine hoặc lệnh tương đương.
3. Áp dụng một màu tô cho đối tượng kết quả.
4. Kiểm tra quy tắc tô.
5. Mở lại SVG đã lưu trong trình duyệt và ứng dụng đích.

Tài liệu đường dẫn ghép hiện tại của Adobe dùng cùng mô hình: đường dẫn thành phần xác định vùng tô và trong suốt qua quy tắc tô.

Khôi phục quan hệ, không chỉ hình thức

Với hình con dấu, kiểm tra hình học dấu gốm nổi và lõm trước khi quyết định vùng nào cần giữ được tô.

Kiểm tra nonzero và evenodd

SVG có hai quy tắc tô. Đặc tả tô SVG 2 đặt nonzero làm giá trị ban đầu và định nghĩa evenodd là lựa chọn còn lại.

• nonzero dùng số lần cắt đường dẫn có dấu. Đường bao trong sai hướng có thể cộng vùng tô thay vì triệt tiêu.
• evenodd đếm số lần cắt. Điểm được bao hai lần nằm ngoài, nên đường bao lồng đơn giản thành lỗ bất kể hướng.

Đường dẫn tối giản này chứa hai hình chữ nhật cùng hướng. Với evenodd, tâm giữ trong suốt:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

Đổi quy tắc hữu ích khi khớp thiết kế, nhưng không phải cách sửa chung. Hai đường bao vẫn phải được xét như đường dẫn con của cùng hình. Đặt fill-rule="evenodd" trên hai đối tượng không liên quan không khiến một đối tượng khoét đối tượng kia.

Nếu giữ nonzero, chỉ đảo đường bao trong khi trình biên tập có lệnh đó. Illustrator cung cấp cả hai lựa chọn quy tắc tô và điều khiển hướng đường dẫn cho đường dẫn ghép. Lưu bản sao trước khi đảo bất cứ thứ gì, vì tự giao nhau và nhiều khoảng rỗng lồng có thể tạo kết quả khác vòng đơn giản.

Khi SVG đúng nhưng công cụ nhập sai

Một số công cụ cắt, CAD, 3D và hoạt hình chỉ hỗ trợ tập con SVG thực tế. Trình duyệt có thể kết xuất đường dẫn ghép đúng trong khi ứng dụng đích nhập từng đường bao thành đối tượng đặc.

Dùng thứ tự sửa này:

1. Lưu bản sao đơn giản hóa từ trình biên tập nguồn.
2. Chuyển văn bản còn chỉnh sửa được thành đường dẫn trong bản sao khi nhập chữ là điểm yếu.
3. Chỉ thay mặt nạ, mặt nạ cắt và hiệu ứng hình thức bằng hình học đường dẫn thuần nơi cần.
4. Giữ mỗi lỗ dự định cùng đường bao ngoài trong một đường dẫn ghép.
5. Chủ động thử evenodd và nonzero thay vì đổi liên tục.
6. Nếu công cụ nhập vẫn tô khoảng rỗng, nhập cả hai ranh giới và trừ biên dạng trong tại ứng dụng đích.

Với quy trình đùn khối, ứng dụng đích cũng phải nhận biết biên dạng khép kín chọn được. Chẩn đoán đùn khối SVG trình bày đầu mút mở, bản trùng và tính hợp lệ biên dạng sau khi lỗ được giữ.

Khi đồ lại đóng khoảng rỗng

Công cụ đồ lại có thể đóng khoảng rỗng trong chữ nhỏ hoặc gộp khe hẹp khi nguồn raster tí hon, mờ hoặc tương phản thấp. Đây là vấn đề hình học, không phải quy tắc tô: ranh giới trong chưa từng đi vào SVG.

Quay lại nguồn raster và:

• phóng lớn hoặc chụp/quét lại nguồn mà không thêm mờ;
• tăng phân tách quanh khoảng rỗng quan trọng;
• xóa nhiễu nén gần khe;
• giảm làm mượt hoặc gộp màu nếu công cụ có điều khiển;
• so kết quả mới ở kích thước đầu ra cuối.

Đây là trường hợp PerfectVector có thể giúp. Dùng quy trình ảnh sang vector khi có raster gốc và cần đồ lại SVG mới. Kiểm tra mọi khoảng rỗng chữ và khoảng trống âm trước tải. Nếu SVG đúng đến khi trình biên tập tách đường dẫn ghép, sửa SVG đó; đồ lại không khôi phục lịch sử chỉnh đã mất.

Cách ưu tiên nguồn tương tự hữu ích cho chữ. Hướng dẫn vector chữ vẽ tay cho thấy cách giữ khoảng rỗng nhỏ mở mà không làm mất cá tính toàn bản vẽ.

Kiểm tra cuối an toàn

Trước khi gửi SVG đã sửa:

• xem trên nền sáng, tối và trong suốt;
• chọn đối tượng và xác nhận đó là một đường dẫn ghép dự định;
• kiểm tra quy tắc tô trong trình biên tập hoặc mã SVG;
• kiểm tra mọi khoảng rỗng chữ, vòng và khoảng trống âm khép kín;
• mở lại tệp xuất thay vì tin khung chưa lưu;
• thử đúng ứng dụng đích;
• giữ nguồn chỉnh sửa được riêng với bản giao đơn giản hóa.

Nếu đối tượng giờ hoạt động như một vùng chọn, có thể đó là đúng. Đường dẫn ghép được thiết kế là một đối tượng. Dùng hướng dẫn bỏ nhóm SVG trước khi tách lại.

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

Vì sao lỗ bị tô sau khi dùng Break Apart? Break Apart tách đường bao trong khỏi đường dẫn ghép ngoài. Lỗ cũ thành đối tượng tô thông thường. Hoàn tác hoặc kết hợp lại mỗi đường bao ngoài với đúng đường bao trong rồi xác minh quy tắc tô.

Có nên dùng fill-rule="evenodd" cho lỗ SVG không? evenodd thường tiện cho đường bao lồng vì hướng không quyết định kết quả. Nó vẫn hoạt động trong một hình; không trừ đối tượng riêng. Giữ nonzero khi nguồn và ứng dụng đích bảo toàn hướng đường bao dự định.

Vì sao SVG đúng trong trình duyệt nhưng đặc trong ứng dụng? Công cụ nhập đích có thể không giữ đường dẫn ghép, quy tắc tô, mặt nạ hoặc hướng đường bao. Đơn giản hóa bản sao thành đường dẫn thuần rồi thử lại. Nếu cần, nhập ranh giới ngoài và trong rồi trừ lỗ tại đích.

Có thể tạo lỗ bằng hình trắng đặt trên không? Nó chỉ giả lỗ trên nền trắng. Đối tượng trắng vẫn có màu tô, nên có thể in, cắt hoặc nhập thành khối đặc khác. Dùng đường dẫn ghép, phép trừ hoặc cấu trúc trong suốt khác khi nền phải hiện xuyên qua.

PerfectVector có sửa lỗ bị tô trong SVG có sẵn không? PerfectVector hữu ích khi có thể quay lại nguồn raster phù hợp và tạo kết quả đồ lại mới với khoảng rỗng dự định nhìn thấy. Nó không sửa đường dẫn ghép bị trình biên tập tách hoặc công cụ nhập bỏ qua. Sửa các quan hệ ấy trong trình biên tập vector hoặc ứng dụng đích.

Nguồn

1. W3C — Tô SVG 2 — Định nghĩa nonzero, evenodd và giá trị quy tắc tô ban đầu.
2. W3C — Đường dẫn SVG — Định nghĩa đường dẫn, đường dẫn con và hình học đường dẫn khép kín.
3. Adobe Illustrator — Tạo đường dẫn ghép — Mô tả lỗ ghép, quy tắc tô và đảo hướng đường dẫn thành phần.
4. PerfectVector — Ảnh sang vector — Quy trình raster sang SVG hiện tại dùng trong trường hợp cần đồ lại.

Nếu khoảng rỗng mất khi đồ raster, hãy tạo vector mới từ nguồn sạch và kiểm tra mọi khoảng rỗng chữ trước khi giao. Nếu bản trình duyệt đã đúng, giữ hình học ấy và chỉ sửa bước nhập bị lỗi.