Giải quyết thách thức lập trình cong với SVG Gradients

Trong thế giới lập trình, những nhiệm vụ dường như đơn giản có thể biến thành những thách thức phức tạp. Gần đây, chúng tôi đã gặp phải một thách thức như vậy khi cố gắng chuyển đổi thiết kế Figma thành mã. Nhiệm vụ hiện tại liên quan đến việc tạo ra một mặt số hướng tâm với dải màu tuyến tính – một yêu cầu có vẻ đơn giản nhưng chẳng bao lâu sau lại trở nên phức tạp hơn dự kiến.

Trong bài đăng này, chúng ta sẽ đi sâu vào thế giới của độ dốc SVG và khám phá giải pháp mà chúng ta đã nghĩ ra để giải quyết những thách thức nảy sinh và tranh luận tại sao đôi khi, được đưa ra những thách thức kỹ thuật phức tạp như thế này lại có thể rất bổ ích.

Ném một quả bóng cong

Lúc đầu, nó có vẻ đơn giản. Phải có một thư viện mà chúng ta có thể sử dụng để tạo mặt số và áp dụng gradient tuyến tính cho nó. Nó có thể khó đến mức nào?

Và sau khi tìm kiếm nhanh các thư viện điều tra như High Charts và FusionCharts , chúng tôi đã tìm thấy các thư viện có khả năng tạo mặt số hướng tâm cũng như tạo độ dốc tuyến tính bằng SVG. Tuy nhiên, sự phức tạp thực sự xuất hiện khi cố gắng kết hợp hai yếu tố này một cách liền mạch. Trở ngại nằm ở bản chất của độ dốc tuyến tính được xác định trong SVG. Theo mặc định, độ dốc tuyến tính chuyển tiếp giữa các màu dọc theo một đường thẳng. Khi được áp dụng cho nét vẽ của đường tròn, hướng của dải màu vẫn tuyến tính, không tính đến đường cong của hình tròn.

Do đó, nếu chúng ta áp dụng một dải màu tuyến tính cho một mặt số tròn hoàn chỉnh được tạo bằng một đường cong duy nhất, thì dải màu sẽ đi theo đường thẳng thay vì đường xuyên tâm mong muốn dọc theo mặt số. Điều đó sẽ không đạt được độ dốc cong mà chúng tôi đang tìm kiếm – vì vậy nó đã trở lại bảng vẽ.

Phá vỡ vấn đề

Thay vào đó, để đạt được hiệu ứng của một dải màu chuyển tiếp mượt mà bao quanh mặt số hướng tâm, chúng tôi nhận ra rằng chúng tôi cần chia mặt số thành nhiều phần và áp dụng các dải màu riêng biệt cho từng phần.

Trong ví dụ của chúng tôi, chúng tôi chia mặt số thành bốn phần; mỗi cái được chỉ định độ dốc tuyến tính của riêng nó. Bằng cách cẩn thận lựa chọn màu sắc cho các điểm dừng chuyển màu, chúng tôi có thể tạo ra giao diện chuyển màu liên tục xung quanh mặt số.

Ở đây, chúng ta bắt đầu xem cách chúng ta có thể tạo mặt số hướng tâm trong SVG. Thuộc tính “d” xác định một đường dẫn sẽ được vẽ. Trong trường hợp này, nó chỉ định đường dẫn cho phần tư đầu tiên của mặt số xuyên tâm của chúng tôi.

'M' là viết tắt của "Move To" và đặt điểm ban đầu của đường dẫn tại tọa độ (150,10). Lệnh 'a' tạo một cung hình elip. Lệnh cung này có một số tham số. Hai tham số đầu tiên, '120 120', đặt bán kính x và y của hình elip được sử dụng để vẽ cung. '0 0 1' xác định xoay trục x (bằng 0), cờ vòng cung lớn và cờ quét. '103.9230 60' cuối cùng đặt điểm cuối của đường dẫn, hoàn thành cung của chúng ta. Sau đó, chúng tôi áp dụng gradient với thuộc tính nét vẽ trên đường dẫn.

Quá trình này được lặp lại cho mỗi phần tư của mặt số. Mỗi quý có con đường riêng và độ dốc riêng. Điều này mang lại hiệu ứng của một dải màu đơn, chuyển tiếp mượt mà bao quanh mặt số.

Điền Gradient động

Để tự động tô dải màu dọc theo mặt số, chúng tôi đã tận dụng các thuộc tính nét-dashoffset và nét-dasharray của đường dẫn SVG. Kỹ thuật này thường được sử dụng khi tạo mặt số xuyên tâm. Thủ thuật CSS có một bài viết chuyên sâu về cách tiếp cận: SVG line animation works .

Bằng cách đặt nét gạch ngang bằng với độ dài của đường dẫn, chúng tôi đã thiết lập một mẫu các dấu gạch ngang và khoảng trống giống như một đường chấm chấm bao quanh hình tròn. Thuộc tính nét gạch ngang xác định điểm bắt đầu của mẫu gạch ngang, tạo hiệu ứng chuyển động của nét vẽ một cách hiệu quả. Bằng cách tạo hiệu ứng cho tập hợp nét gạch ngang từ điểm bắt đầu của đường dẫn đến chiều dài của đường dẫn, đường gạch ngang dường như “di chuyển” quanh vòng tròn.

Chấp nhận sự phức tạp (Đôi khi)

Mặc dù các thiết kế phức tạp có thể biến thành những thách thức kỹ thuật khó khăn, nhưng chúng cũng là cơ hội để các lập trình viên trau dồi kỹ năng giải quyết vấn đề của họ. Đây là một phần không thể thiếu để khiến việc lập trình trở nên thú vị, ít nhất là đối với tôi.

Sự phức tạp mà chúng ta gặp phải trong lập trình thường phản ánh sự phức tạp của các thiết kế mà chúng ta đang làm việc. Thiết kế Figma của chúng tôi, có mặt số hướng tâm với độ dốc tuyến tính, là một ví dụ tuyệt vời về cách một yếu tố thiết kế hấp dẫn trực quan có thể đưa ra những thách thức kỹ thuật quan trọng.

Thật dễ dàng khi các lập trình viên cố gắng làm việc theo bản năng với các nhà thiết kế để đưa ra một thỏa hiệp về thông số kỹ thuật thiết kế. Trên thực tế, đó thường là cách tiếp cận đúng đắn. Nhưng đôi khi, nếu bạn muốn thiết kế của mình nổi bật so với đám đông, thay vào đó, bạn cần phải vượt qua vùng an toàn của mình và nghĩ ra những cách sáng tạo để giải quyết vấn đề của mình.

Một cách khác để giải thích điều này là mặc dù sự phức tạp trong thiết kế có thể chuyển thành những thách thức kỹ thuật, nhưng chúng cũng là cơ hội để các lập trình viên trau dồi kỹ năng quý giá nhất của họ, khả năng giải quyết vấn đề.

Cũng được xuất bản ở đây .