Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Cách Sử Dụng SVG Pattern cho Background

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

SVG pattern cung cấp một cách tiếp cận linh hoạt hơn so với CSS để tạo một background lặp trên trang web. Hãy xem lý do tại sao và cách bạn có thể sử dụng chúng.

Những gì bạn sẽ học

Hướng dẫn này gồm có cả video và bài viết - dưới đây là những gì bạn sẽ học:

  1. Chúng ta sẽ bắt đầu bằng cách tìm hiểu phương pháp quen thuộc đó là dùng CSS.
  2. Sau đó chúng ta sẽ tạo một cặp SVG pattern, song song đó học cú pháp phù hợp.
  3. Chúng ta sẽ so sánh hai hướng tiếp cận và thảo luận về ưu và nhược điểm.
  4. Tiếp theo, chúng ta sẽ xem xét một vài công cụ mà bạn có thể dùng để tạo SVG pattern.
  5. Sau cùng, chúng ta xem xét trình duyệt hỗ trợ cho SVG.

Xem video hướng dẫn

1. Phương Pháp Dùng CSS

Hãy bắt đầu bằng cách xem xét phương pháp dùng CSS - phương pháp truyền thống hơn trong việc lặp một hình ảnh để tạo background. Ý tưởng thì đơn giản thôi: chúng ta truyền một URL vào thuộc tính background của phần tử mà chúng ta muốn. URL trỏ đến file ảnh, trong trường hợp này là một file PNG. Mặc định tấm hình sẽ lặp đi lặp lại ở cả hai trục.

Nó sẽ giống như sau:

2. SVG Pattern

Bây giờ hãy cùng tìm hiểu về SVG pattern - một thứ gì đó mà khi lần đầu gặp phải, sẽ hơi khó hiểu. Chúng ta sẽ bắt đầu bằng cách là tự code bằng tay một ví dụ.

Viết Code SVG

Đối với những ai chưa biết viết code SVG bằng tay, hai bài hướng dẫn cơ bản của Kezz Bracey thật sự rất hữu ích:

Bắt đầu với một SVG

Để bắt đầu, chúng ta sẽ tạo một phần tử svg, cho nó chiều cao và dài là 100% để nó chiếm trọn container mà chúng ta đặt vào.

Để tạo một pattern chúng ta phải đặt nó trong phần defs của svg, giống như sau:

Bây giờ hãy thêm một số thuộc tính vào phần tử pattern đó. Chúng ta sẽ cho nó một ID để chúng ta có thể tham chiếu đến nó sau này, sau đó chúng ta sẽ chỉ định trục X và Y ban đầu, các giá trị width và height, cho patternUnitsuserSpaceOnUse (điều này xác định hệ thống trục toạ độ, cái mà bạn có thể đọc thêm tại MDN):

Sau khi đã thiết lập các tham số đó, bây giờ chúng ta cần định nghĩa tấm hình mà chúng ta muốn lặp. Hãy tạo một hình tròn cơ bản:

Vẫn chưa có pattern hiện ra, nhưng đó là bởi vì chúng ta định nghĩa nó mà chưa thật sự áp dụng nó vào bất cứ thứ gì. Hãy thay đổi điều đó bằng cách áp dụng nó vào một <rect> bên ngoài <defs> của chúng ta.

Quan trọng, bạn sẽ thấy thuộc tính fill (thường là một giá trị màu sắc hoặ tên) trỏ đến một URL chứa ID của pattern vừa mới định nghĩa: fill="url(#polka-dots)".

Hãy xem bản demo bên dưới:

SVG Pattern Phức Tạp Hơn

Đối với một ví dụ phức tạp hơn chúng ta sẽ bỏ qua phần code bằng tay và tạo một pattern bằng công cụ. Chúng ta sẽ dùng heropatterns.com, một trang web cho phép bạn chọn các SVG pattern có sẵn, thay đổi màu sắc và thuộc tính của chúng, sau đó copy code được tạo ra.

Tôi sẽ dùng jigsaw pattern:

Thay vì copy toàn bộ CSS được tạo ra, tôi chỉ copy tham số d="", chính là cái vẽ ra path.

Code svg mà chúng ta thiết lập sẽ hoàn toàn giống với ví dụ trước. Phần ID bên trong <pattern> tất nhiên sẽ khác rồi, và chúng ta sẽ cho nó một kích thước hơi khác dựa theo những gì được dùng trên heropatterns.

Vậy thì ở đâu, trong ví dụ trước của chúng ta, chúng ta đã định nghĩa một <circle>, lần này chúng ta định nghĩa một <path>. Chúng ta cho nó một màu fill, sau đó dán path mà chúng ta đã copy mới đây vào. Nó cho chúng ta hình sau đây:

3. Phương Pháp CSS So Với SVG Pattern

Ưu điểm của Phương pháp CSS::

Nhược điểm của SVG pattern:ons:
    Khá khó dùng use Trình duyệt hỗ trợ thấpport
4. Các Công Cụ SVG PatternoolsHãy xem bốn nguồn này, chúng có thể thực sự hữu ích cho việc tạo ra code ý tưởng!eas! Tìm hiểu thêmMore
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.