Chuyển sắc SVG dọc đường dẫn: kiểm tra màu ở khúc cong

SVG linearGradient thông thường không đo mức tiến triển dọc theo đường dẫn cong. Nó tô theo một vector chuyển sắc trong hệ tọa độ. Nếu một dải quay ngược lại, hai điểm ở cùng vị trí dọc vector đó có thể nhận cùng màu dù nằm cách xa nhau trên dải.

Với thiết kế tĩnh cần màu tiến triển quanh một khúc cong, bạn có thể tạo các phần màu riêng. Cách này cho bạn kiểm soát thứ tự, nhưng thêm hình học và ranh giới màu nhìn thấy được. Ví dụ gốc của chúng tôi so sánh chuyển sắc ngang với tám dải chủ đích trên cùng lộ trình được tạo. Cả hai tệp chứa đường dẫn và không có ảnh nhúng.

Kiểm tra nơi màu lặp lại

Đặc tả nguồn tô SVG2 định nghĩa chuyển sắc thẳng qua vector và các điểm màu. Nó mô tả chuyển sắc tỏa tròn qua hình học tròn riêng. Không định nghĩa nào biến đường dẫn bất kỳ thành trục màu theo khoảng cách dọc đường dẫn.

Dải của chúng tôi bắt đầu phía trên trái, chạy sang phải, uốn quanh nửa đường tròn rồi trở lại phía dưới trái. Chuyển sắc ngang làm cả hai đầu trái màu cam và khúc cong phải màu tím. Đó là chuyển sắc tọa độ hợp lệ; nó chỉ trả lời câu hỏi thiết kế khác với “đổi màu từ đầu lộ trình này đến cuối”.

Hướng dẫn chuyển sắc của MDN giải thích mô hình điểm đầu cuối và điểm màu. Thêm điểm màu thay đổi thứ tự màu dựa trên tọa độ đó. Nó không làm màu tô đi theo đường cong.

Màu theo tọa độ và các dải tự tạo

Giữ một chuyển sắc thông thường làm đối chứng

Lưu tệp hoàn chỉnh này thành coordinate.svg. Đường dẫn dùng nét rộng 24 đơn vị trong viewBox 200×160. Các đoạn thẳng và nửa đường tròn phải tạo thành một đường tâm có thể chỉnh sửa.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs><linearGradient id="across" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="170" y2="0" color-interpolation="sRGB"><stop offset="0" stop-color="#e36b2c"/><stop offset="1" stop-color="#704baa"/></linearGradient></defs>
<path d="M30 30 H120 A50 50 0 0 1 120 130 H30" fill="none" stroke="url(#across)" stroke-width="24" stroke-linecap="butt"/>
</svg>

Chúng tôi dùng gradientUnits="userSpaceOnUse" để xác định rõ điểm đầu cuối chuyển sắc trong hệ tọa độ nguồn. Đổi sang tọa độ hộp bao sẽ thay cách biểu diễn các điểm đó; nó không đưa vào màu tô theo khoảng cách đường dẫn. Xem tài liệu tham khảo gradientUnits và hướng dẫn tọa độ chuyển sắc.

Toàn bộ lộ trình là một phần tử path. Giữ phiên bản đơn giản này làm bản chính hình học ngay cả khi bạn quyết định bàn giao hiệu ứng màu phức tạp hơn.

Tạo thứ tự màu từng bậc quanh khúc cong

Lưu mã sau thành bands.svg. Nó chia đoạn thẳng trên thành hai phần, nửa đường tròn thành bốn cung và đoạn thẳng quay lại thành hai phần. Màu được gán theo thứ tự lộ trình, từ cam ở đầu phía trên đến tím ở cuối phía dưới.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<g fill="none" stroke-width="24" stroke-linecap="butt">
  <path d="M30 30 H75" stroke="#e36b2c"/>
  <path d="M75 30 H120" stroke="#d38d31"/>
  <path d="M120 30 A50 50 0 0 1 155.355339 44.644661" stroke="#b4a747"/>
  <path d="M155.355339 44.644661 A50 50 0 0 1 170 80" stroke="#6fab79"/>
  <path d="M170 80 A50 50 0 0 1 155.355339 115.355339" stroke="#3d9dac"/>
  <path d="M155.355339 115.355339 A50 50 0 0 1 120 130" stroke="#4486b9"/>
  <path d="M120 130 H75" stroke="#5265b2"/>
  <path d="M75 130 H30" stroke="#704baa"/>
</g>
</svg>

Đây là tám dải được chọn thủ công với độ dài đoạn không bằng nhau. Chúng không phải phép tính bước tăng màu đều trên mỗi đơn vị chiều dài đường dẫn và không tạo chuyển màu liên tục. Điểm đầu cuối cung có số thập phân được làm tròn xấp xỉ lộ trình gốc; ví dụ này không khẳng định đường viền giống hệt từng pixel.

Tài liệu tham khảo path mô tả phần tử và dữ liệu đường dẫn. Mỗi phần ở đây vẫn là đường tâm có nét, không phải vùng tô kín được tạo từ đường viền ngoài. Nếu đích cần hình kín, chuẩn bị và kiểm tra hình học đó riêng thay vì xem các mảnh nét này là đường bao cắt.

Chúng tôi dùng stroke-linecap="butt" để các mảnh kề nhau không kéo dài quá điểm cuối. Đầu tròn trên từng phần bên trong sẽ chồng lên màu lân cận. Chuyển tiếp từ thẳng sang cung cũng cần hướng khớp nhau; hướng dẫn nối mượt trình bày vấn đề liên tục hình học riêng.

So sánh hai kích thước và hai vị trí

Chúng tôi kết xuất cả hai tệp gốc trong Chrome ở 200×160 và 400×320 pixel CSS. Trình duyệt giải mã từng SVG, rồi vẽ lên canvas có kích thước bộ đệm khớp kích thước kiểm thử. Tỷ lệ pixel thiết bị của trình duyệt là 2; các mẫu ghi nhận này đến từ bộ đệm canvas, không phải đếm pixel thiết bị trên ảnh chụp màn hình.

Ở tọa độ nguồn (60,30) và (60,130), các điểm nằm trên những đoạn thẳng khác nhau của lộ trình. Chúng có cùng tọa độ ngang, nên chuyển sắc ngang cho cùng màu lấy mẫu.

Các cặp mẫu giống nhau ở cả hai kích thước được thử, với alpha 255 trong phần được tô. Vùng trống tại nguồn (100,80) có alpha bằng 0 trong cả sáu trường hợp. Điều đó kiểm tra các tệp tự tạo này trong trình duyệt này; nó không chứng nhận mọi bộ kết xuất hay tất cả pixel ranh giới.

Bản kết xuất theo dải giữ rõ các bước đổi màu ở cả hai kích thước. Kiểm tra chỗ nối ở kích thước bàn giao, đặc biệt sau khi xuất hoặc nhúng. Các mảnh riêng có thể lộ khe nối do khử răng cưa, làm tròn hoặc chỉnh sửa về sau. Tăng số phần có thể giảm độ lớn mỗi bước màu, nhưng cũng tạo thêm đường dẫn và ranh giới cần duy trì.

Chọn cách xử lý trước khi mở rộng hình

Xoay chuyển sắc thẳng thay đổi hướng của nó. Lặp nó thay đổi cách màu mở rộng. Không thao tác nào khiến nó liên tục đổi hướng cùng đường tâm quay lại này. Chuyển sắc tỏa tròn có thể hợp với bố cục tròn, nhưng đó là hình học màu tô riêng, không phải giải pháp chung theo khoảng cách lộ trình.

Nếu chỉnh đường cong về sau, hãy sửa các phần cùng nhau. Giữ bản chính phẳng để so sánh lộ trình mong muốn và giữ bản sao hiệu ứng màu riêng. Hướng dẫn đường dẫn tương đối có thể giúp khi đọc hoặc di chuyển các lệnh đường dẫn nền tảng.

Nếu hình ban đầu là PNG hoặc JPG và bạn cần đường bao có thể chỉnh sửa, hãy chuyển nguồn bằng PerfectVector, kiểm tra hình và các vùng mở đã khôi phục, rồi giữ bản chính SVG sạch. Chọn hoặc dựng lại cách xử lý màu sau khi kiểm tra hình học đó. Vector hóa không bảo đảm khôi phục chính xác chuyển màu liên tục hay tạo ra tính năng chuyển sắc dọc đường dẫn có sẵn. SVG sạch có sẵn cần sửa màu tô và hình học trực tiếp; hướng dẫn vector hóa ảnh giải thích khi nào chuyển raster hữu ích.

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

Tôi có thể làm linearGradient đi theo mọi nét cong không? Định nghĩa linearGradient thông thường không cung cấp thiết lập khoảng cách đường dẫn. Vector tọa độ của nó kiểm soát màu tô. Ví dụ từng bậc gán các màu riêng cho các phần lộ trình riêng.

Thêm điểm màu chuyển sắc có sửa màu quay lại không? Thêm điểm màu có thể tinh chỉnh chuyển màu dọc vector chuyển sắc. Các điểm ở cùng vị trí dọc vector đó vẫn có cùng màu tô dựa trên tọa độ.

Tệp theo dải có chứa ảnh raster không? Không. Ví dụ tự tạo của chúng tôi chứa tám phần tử path và không có phần tử image. Nó cũng có các bước màu nhìn thấy thay vì chuyển sắc liên tục theo khoảng cách đường dẫn.

Tôi có nên thay mọi chuyển sắc bằng các đường dẫn riêng không? Dùng chuyển sắc tọa độ đơn giản hơn khi nó hợp thiết kế. Các phần riêng hữu ích khi chấp nhận được kiểu tiến triển và chi phí chỉnh sửa; kiểm tra khe nối và kết xuất ở đích trước khi bàn giao.

Nguồn tham khảo

1. W3C — Nguồn tô SVG2 — Vector chuyển sắc, điểm màu và tô theo tọa độ.
2. MDN — Chuyển sắc trong SVG — Tạo chuyển sắc thẳng và tỏa tròn.
3. MDN — gradientUnits — Hệ tọa độ không gian người dùng và hộp bao.
4. MDN — path — Các phần tử đường dẫn và dữ liệu đường dẫn có thể kiểm tra.
5. MDN — stroke-linecap — Hành vi đầu phẳng và đầu tròn.