Đơn vị chuyển sắc SVG: Dùng chung một dải chuyển sắc cho các phần logo

Để trải một dải chuyển sắc qua các đường dẫn SVG riêng, dùng gradientUnits="userSpaceOnUse", đặt điểm đầu cuối trong tọa độ của hình và giữ các đường dẫn trong cùng hệ tọa độ. Mỗi đường dẫn sẽ hiện phần chuyển sắc tại vị trí của nó. Bạn có thể giữ các phần logo chỉnh sửa riêng được.

Mặc định objectBoundingBox điều chỉnh dải chuyển sắc vừa từng phần tử được tô. Vì thế, tham chiếu cùng ID chuyển sắc từ ba đường dẫn có thể tạo ba dải tím sang cam đầy đủ. Đổi đơn vị sửa được sự lặp lại đó, nhưng phần tử con có phép biến đổi vẫn có thể làm màu riêng của nó dịch đi. Tài liệu gradientUnits của MDN định nghĩa không gian tham chiếu là không gian người dùng hiện tại của phần tử sử dụng chuyển sắc.

Hướng dẫn này dùng biểu tượng tự tạo ba phần được vẽ trực tiếp bằng đường dẫn SVG. Nếu đã có logo vector, hãy làm từ bản gốc đó. Nguồn chỉ có raster cần khôi phục hình học trước bước sửa màu này; hướng dẫn vector hóa chuyển sắc rộng hơn giải thích lựa chọn ấy.

Quyết định chuyển sắc thuộc từng hình hay toàn bộ biểu tượng

Dùng màu tương đối với đối tượng khi mỗi phần cần dải chuyển sắc đầy đủ riêng. Dùng điểm đầu cuối trong không gian người dùng chung khi phần trái và phải cần lấy các màu khác nhau từ một dải chuyển tiếp.

Đặt fill="url(#brandBlend)" trên nhóm truyền màu tô đến các phần tử con. Nó không làm chuyển sắc theo khung bao đối tượng đo hình bao kết hợp của nhóm. Các phần tử con vẫn nhận màu riêng. Đặc tả tài nguyên tô màu SVG mô tả chuyển sắc là tài nguyên được tham chiếu bởi màu tô hoặc đường viền của một phần tử.

Một biểu tượng, bốn lựa chọn tọa độ

Đặt điểm đầu cuối bao trùm hình

Các đường dẫn của ví dụ chiếm vị trí ngang từ x=30 đến x=310. Đó là điểm đầu cuối của chuyển sắc. Tam giác dừng ở x=125, khối giữa chiếm từ 140 đến 210, và hình phải trải từ 225 đến 310.

Lưu đoạn này thành shared-logo.svg rồi mở trong trình duyệt:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

Bạn sẽ thấy tam giác tím, khối giữa chủ yếu hồng và hình phải ngả cam, như B. Các khe trống che những đoạn của cùng dải chuyển sắc; màu không bắt đầu lại khi đường dẫn tiếp theo bắt đầu. Đổi một điểm dừng màu sẽ cập nhật cả ba phần vì chúng tham chiếu cùng định nghĩa.

Để so sánh trực tiếp với A, thay các thuộc tính gradientUnits, x1, y1, x2 và y2 của chuyển sắc bằng x1="0%" y1="0%" x2="100%" y2="0%". Bỏ gradientUnits khôi phục mặc định. Mỗi hình lúc này nhận toàn bộ dải chuyển sắc.

Phần trăm cũng có tham chiếu khác: với userSpaceOnUse, chúng tham chiếu khung nhìn SVG hiện tại thay vì khung bao đối tượng được tô. Số cụ thể giúp ví dụ này dễ kiểm tra hơn. Logo chỉ chiếm một phần viewBox lớn không nhất thiết phải dùng toàn bộ chiều rộng viewBox cho chuyển sắc.

Kiểm tra phép biến đổi khi một phần sai màu

Trong C, hình phải trông như vẫn ở chỗ cũ. Tọa độ đường dẫn của nó dịch trái 60 đơn vị, rồi nhóm con dịch nó phải 60 đơn vị:

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

Thay đường dẫn thứ ba trong ví dụ đầy đủ bằng nhóm này để tái lập sai lệch. Mép trái nhìn thấy vẫn ở x=225, nhưng mép trái cục bộ là x=165. Chuyển sắc dùng không gian cục bộ đó, nên phần này lấy màu từ đoạn sớm hơn, hồng hơn của dải. userSpaceOnUse không bảo đảm một hệ tọa độ toàn cục bất kể các phép biến đổi lồng nhau.

Với biểu tượng này, khôi phục tọa độ gốc của đường dẫn thứ ba và xóa phép tịnh tiến riêng. Nếu cần di chuyển cả logo, hãy áp dụng transform="translate(10 0)" cho nhóm ngoài hiện có. Cách đó tạo D: cả ba hình và màu chung di chuyển cùng nhau.

Cách sửa này hoạt động vì các đường dẫn đã được biểu diễn trong hệ tọa độ chung. Đặt những phần tử con có biến đổi không liên quan vào thêm một nhóm không loại các phép biến đổi riêng của chúng. Với logo nhập vào, kiểm tra các phép biến đổi trước khi làm phẳng hoặc viết lại hình học, và giữ bản sao bản gốc.

Khi gradientTransform hữu ích

gradientTransform đổi ánh xạ tọa độ màu mà không đổi hình học đường dẫn. Nó hữu ích khi bạn chủ động cần xoay, làm xiên hoặc đặt lại vị trí chuyển sắc. MDN mô tả nó là phép biến đổi bổ sung áp dụng sau khi thiết lập hệ tọa độ được chọn bởi gradientUnits.

Tránh sửa một định nghĩa chung để bù cho một phần tử con mà chưa kiểm tra các phần khác. Mọi hình tham chiếu định nghĩa đó có thể bị tác động. Giữ hình trong không gian chung dễ duy trì hơn với logo đơn giản ở đây; hình nhập vào phức tạp hơn có thể cần định nghĩa chuyển sắc với ánh xạ riêng.

PerfectVector phù hợp ở đâu

Nếu nguồn duy nhất là logo PNG hoặc JPG, PerfectVector có thể giúp khôi phục hình học vector chỉnh sửa được trước khi bạn dựng lại dải chuyển sắc chung. Vector hóa logo, rồi kiểm tra hình bao, lỗ và các phần riêng trong trình chỉnh sửa. Dùng những hình đó làm điểm bắt đầu cho màu chung.

Minh họa trên được viết thủ công để tách riêng hành vi tọa độ; không phải kết quả chuyển đổi PerfectVector. Không nên cho rằng đồ lại pixel có sắc độ sẽ khôi phục các điểm dừng chuyển sắc hoặc thiết lập tọa độ gốc. Logo đơn giản cũng có thể nhanh hơn khi vẽ lại thủ công. Giữ SVG, AI hoặc PDF vector hiện có nếu có.

Với hình không nhận màu tô mới, dùng kiểm tra đổi màu SVG trước khi đổi tọa độ chuyển sắc. Nếu cùng bản xuất khác nhau giữa các ứng dụng, làm theo chẩn đoán lệch màu SVG.

Mở lại tệp trước khi bàn giao

Lưu SVG mới và thử chính tệp đó, không chỉ khung vẽ trong trình chỉnh sửa. Kiểm tra các điểm sau:

• ID chuyển sắc tồn tại và mọi đường dẫn dự định đều tham chiếu nó.
• Chuyển sắc bao phủ giới hạn logo theo hướng mong muốn.
• Di chuyển toàn bộ biểu tượng vẫn giữ màu đồng bộ.
• Các phần riêng vẫn chọn được ở nơi bạn cần chỉnh sửa.
• Ứng dụng tiếp nhận giữ diện mạo mong đợi.

Kết xuất trình duyệt mượt chứng minh hành vi màu trong trình duyệt đó. Nó không xác nhận hỗ trợ trong mọi trình chỉnh sửa hay biến chuyển sắc thành hình học cắt. Giữ phiên bản màu phẳng cho quy trình cần hình đặc và giữ bản SVG gốc chỉnh sửa được. Hướng dẫn tệp SVG giải thích khác biệt giữa nội dung hình học của tệp và diện mạo hiển thị.

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

Tôi có phải gộp đường dẫn để dùng chung chuyển sắc không? Không. Các đường dẫn riêng có thể tham chiếu một chuyển sắc. Dùng userSpaceOnUse với điểm đầu cuối phù hợp và bảo đảm các đường dẫn dùng chung hệ tọa độ mong muốn.

Vì sao nhóm các đường dẫn vẫn khiến chuyển sắc lặp lại? Nhóm có thể truyền màu tô cho đường dẫn con, nhưng chuyển sắc objectBoundingBox vẫn dùng giới hạn của từng phần tử con được tô. Đặt điểm đầu cuối trong không gian người dùng khi chuyển sắc cần trải trên toàn bộ biểu tượng.

Vì sao màu của một đường dẫn đổi sau khi tôi đưa nó vào nhóm? Phép biến đổi trên nhóm đó có thể đổi hệ tọa độ cục bộ của đường dẫn. So sánh biến đổi của nó với các đường dẫn khác và thử SVG xuất ra trước khi chỉnh chuyển sắc chung.

Nguồn tham khảo

1. MDN — gradientUnits — Định nghĩa mặc định, hệ tọa độ tham chiếu và hành vi phần trăm.
2. Nhóm công tác SVG — Tài nguyên tô màu — Quy định chuyển sắc tái sử dụng, điểm dừng và hành vi lan màu.
3. MDN — gradientTransform — Giải thích biến đổi bổ sung của tọa độ chuyển sắc.

Bạn bắt đầu từ logo raster? Chuyển logo thành đường dẫn SVG chỉnh sửa được, kiểm tra các hình riêng, rồi dựng lại chuyển sắc chung và mở lại bản xuất cuối để kiểm tra căn chỉnh.