Những thứ tuyệt vời có thể làm với SVG

 (fuma-nama.vercel.app)
3 điểm bởi GN⁺ 2025-04-13 | 2 bình luận | Chia sẻ qua WhatsApp
  • SVG là một công cụ mạnh mẽ để biểu diễn đồ họa vector trên web
  • Có thể làm cho các phần tử SVG hấp dẫn hơn bằng animation
  • Có thể dùng mask để nhấn mạnh hoặc ẩn những phần cụ thể của phần tử SVG
  • Có thể triển khai TOC mà không cần JavaScript phía client thông qua server-side rendering
  • Có thể kết hợp CSS và SVG để tạo ra các thành phần tương tác

Animation SVG

  • SVG được dùng để biểu diễn đồ họa vector trên web
  • Có kèm mã ví dụ được viết bằng JSX(React)
  • Có thể dùng line hoặc path để tạo đường nét, rồi dùng chúng làm mask để thêm animation
  • Có thể định nghĩa animation bằng @keyframes, và thay đổi vị trí phần tử thông qua thuộc tính transform
  • Có thể tận dụng các phần được thiết kế trong Figma hoặc trình chỉnh sửa SVG khác để xử lý khối animation dưới dạng mask

Mục lục kiểu Clerk

  • Triển khai mục lục kiểu Clerk trong Fumadocs
  • Render mục lục ở phía server để tương thích với SSR mà không cần JavaScript phía client
  • Render mục lục trong môi trường server, nơi không thể biết chính xác vị trí phần tử, bằng cách dùng định vị tuyệt đối
  • Thêm một phần animation gọi là thumb để làm nổi bật mục đang hoạt động
  • Tận dụng thông tin vị trí được render ở phía client để dựng một "bản đồ mask" bằng SVG
  • Dùng thuộc tính mask-image để áp mask cho khối div được animation, từ đó render phần được nhấn mạnh của mục lục

Lấy cảm hứng từ Clerk, tác giả đã triển khai mục lục của trang tài liệu theo cách thú vị hơn.

Bài viết liên quan

2 bình luận

 
ndrgrd 2025-04-14

Trông thì đẹp thật, nhưng chỉ cần nhấn mạnh rõ ràng riêng mục hiện tại thôi thì sẽ dễ nhìn hơn.
 
GN⁺ 2025-04-13
Ý kiến Hacker News

  • Bài thuyết trình "SVG Can Do That?" của Sarah Drasner, dù đã 8 năm trôi qua, vẫn khiến nhiều người ngạc nhiên. CSS đã phát triển rất nhiều kể từ đó, nhưng bản thân SVG thì tôi kém chắc chắn hơn. Dù sao thì vẫn rất đáng khuyến nghị

  • Một trong những điều thú vị có thể làm với tệp SVG là dùng entity trong DTD nội tuyến để định nghĩa các hằng số có thể chia sẻ ở nhiều nơi trong tệp. Có thể xem một ví dụ hay trên trang "Squares in Squares" của David Ellsworth

  • SVG hoạt ảnh phức tạp thì rất thú vị, nhưng cũng khó vì độ phức tạp của SMIL và những vấn đề như Safari gặp lỗi chỉ vì không có số 0 ở trước số thập phân

  • "A Deep Dive Into SVG Path Commands" của Nanda Syahrasyad rất hữu ích để hiểu cách các đường dẫn SVG được cấu thành. Dù là tài liệu từ gần 2 năm trước, nó vẫn mở mang tầm mắt về mọi điều SVG có thể làm và cách thực hiện

  • Nếu ai đang dùng JS một cách sáng tạo để tạo SVG động, hãy nhắn DM cho tôi

  • Tôi đã làm một số thứ thú vị với SVG trong một dự án xây bằng React. Có một loạt minh họa tĩnh và các yếu tố hoạt ảnh, còn màu sắc thì được điều khiển bằng CMS

  • SVG+CSS rất mạnh. Một tính năng đơn giản mà tôi thích là tạo sơ đồ tôn trọng chế độ tối/sáng mà không cần JavaScript. Sơ đồ ví dụ: blog.davidv.dev/posts/ipvs-lb/

  • Tôi tự hỏi liệu có phần mở rộng SVG nào cho phép mật độ nét vẽ hay không. Tôi có một máy plotter có thể nhấc bút lên và hạ bút xuống, và nó chạy bằng tệp SVG. Sẽ thật tuyệt nếu có thể hạ bút trong lúc đang vẽ đường

    • À, đó là Axidraw của Evil Mad Scientist Labs. Một thiết bị tuyệt vời, và họ cũng là những con người rất tuyệt

  • Bài đăng rất hay, và thiết kế trang cũng rất đẹp. SVG đã tồn tại từ lâu, nhưng cảm giác tiềm năng của nó vẫn chưa được khai thác hết. Tôi không nghĩ ra phần tử nào khác có thể đóng gói HTML, CSS, JS về mặt chức năng theo cách như vậy. Về cơ bản có thể dùng nó dễ dàng như một tài liệu HTML hoàn toàn khác

  • SVG tạo cảm giác như một vùng đất vẫn còn rất ít được khám phá và sử dụng. Tùy vào trí tưởng tượng mà có thể làm được rất nhiều thứ. Tuy nhiên, cũng có thể phải làm nhiều thứ theo kiểu "hardcore", nên còn tùy trường hợp sử dụng