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

Viewport và viewBox trong SVG (Cho người mới bắt đầu)

by
Difficulty:BeginnerLength:ShortLanguages:

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

Trong bài này, chúng ta sẽ tìm hiểu về viewport và viewBox trong SVG. Bạn sẽ được học:

  • Sự khác nhau giữa viewport và viewBox
  • Các khía cạnh của SVG mà bạn có thể kiểm soát
  • Chúng được áp dụng như thế nào

Nào hãy cùng tìm hiểu nhé!

viewport

Nếu bạn để ý kỹ chữ "viewport" thì bạn sẽ nhận thấy vai trò của nó trong SVG; nó tạo ra một "port" tức là cổng thông qua cái mà bạn có thể "view" tức là nhìn thấy một section của một SVG. Bạn có thể tưởng tượng điều này như là một khe cửa sổ thông qua đó bạn có thể thấy được thế giới còn lại.

The SVG viewport is like a porthole window whose size determines what you can see through it
Viewport giống như một khe cửa sổ mà kích thước của chúng xác định những gì mà bạn có thể nhìn thấy thông qua nó.

Cũng như một cửa sổ, kích thước của viewport xác định bạn có thể nhìn thấy được bao nhiêu, nhưng nó không xác định bất cứ kích thước nào có thể hiện ra thông qua viewport đó. Mặt khác, về mặt lý thuyết có thể là bất kỳ kích thước nào.

Ví dụ, bạn có thể có một cái hình 100px x 100px, nhưng nếu bạn thiết lập viewport thành 50px x 50px, bạn sẽ chỉ thấy một phần của cái hình đó. Kích thước viewport được thiết lập bằng cách thêm các thuộc tính widthheight vào phần tử svg, như sau:

Trong hình SVG đầu tiên, chúng ta nhìn thấy toàn bộ vòng tròn 100px x 100px, nhưng trong SVG thứ hai khi chúng tôi thiết lập kích thước viewport của chúng ta là 50px x 50px, chúng ta chỉ thấy một phần tư vòng tròn.

viewBox

viewBox có thể được xem như là viewport những có thêm những chức năng: nó có thể "dịch chuyển" và nó có thể "phóng to". Xây dựng dựa trên sự tương đồng với "nhìn thông qua gương", nếu viewport giống như là một cửa sổ, thì viewBox giống như một cái ống nhòm.

The SVG viewBox is very similar to the viewport but it can also pan and zoom like a telescope
viewBox rất giống với viewport, nhưng nó còn có thể dịch chuyển và co giãn kích thước giống như một cái ống ngắm.

các tham số của viewBox

Chúng ta kiểm soát viewBox bằng cách thêm nó vào svg dưới dạng một thuộc tính, với một giá trị bao gồm bốn con số cách nhau bởi khoảng trắng:

Hai con số đầu tiên xác định vị trí của viewBox, cái mà chúng ta xem nó như là sự dịch chuyển. Hai con số phía sau xác định kích thước của viewBox, cái mà chúng ta xem như là cái kính lúp.

Lưu ý: tương tự như phần tử svg, thuộc tính viewBox cũng có thể được sử dụng trên các phần tử symbol, marker, patternview.

Phóng đại

Chúng ta bắt đầu bằng cách tìm hiểu khả năng phóng đại, chúng ta có thể làm điều này với hai tham số phía sau của viewBox: widthheight tương ứng. Chúng ta sẽ để nguyên hai tham số đầu tiên là 0 0.

Nếu hai tham số phía sau có cùng kích thước, sẽ không có phóng to hay thu nhỏ vì thế không có gì thay đổi cả. Hay xem ví dụ SVG số 3:

Nếu nếu chúng ta làm cho hai con số lớn hơn kích thước viewport chúng ta sẽ phóng to, và nếu chúng ta làm cho chúng nhỏ hơn chúng ta sẽ thu nhỏ.

Trong SVG số 4 ở trên chúng tôi đã thiết lập widthheight của viewBox thành 100, gấp đôi kích thước của viewport. Nó phóng to hai lần nội dung, do đó lần nữa hiển thị toàn bộ hình tròn.

Trong SVG thứ 5 viewBox được thiết lập widthheight là 25, bằng phân nửa của viewport. Điều này thu nhỏ, hiển thị phân nửa nội dung.

Sự dịch chuyển

Hai tham số đầu tiên của viewBox cho phép bạn xác định vị trí bằng cách thiết lập vị trí của góc trên bên trái của viewBox. Số đầu tiên xác định vị trí theo chiều dọc, và thứ hai xác định vị trí theo trục đứng.

  • Để dịch chuyển sang phải, tăng số đầu tiên.
  • Để dịch sang trái, giảm số đầu tiên.
  • Để dịch chuyển xuống phía dưới, tăng số thứ hai.
  • Để dịch chuyển lên trên, giảm số thứ hai.

Hãy xem nó hoạt động thế nào trong ví dụ này. Hãy nhớ là, SVG số 3 có viewport là 50 x 50, viewBox đã được thêm vào nhưng chưa có dịch chuyển hay phóng đại. Số 6 thì tương tự, nhưng dịch chuyển về bên phải và xuống dưới:

Dịch chuyển và Phóng đại cùng lúc

Tất nhiên bạn có thể vừa dịch chuyển vừa phóng đại cùng lúc, bằng cách sử dụng tất cả các tham số cùng một lúc, ví dụ:

Khi sử dụng viewBox, hãy thiết lập viewport

Bất cứ khi nào bạn sử dụng thuộc tính viewBox, hãy nhớ thiết lập kích thước viewport nữa. Nếu không, chúng sẽ mặc định là 100% và bạn có thể có một cái hình quá khổ.

Tóm tắt

Nào hãy tóm tắt mọi thứ lại:

  • viewport tương tự như một cái cửa sổ mà bạn nhìn xuyên qua nó để thấy nội dụng của một SVG.
  • viewBox tương tự như viewport, nhưng bạn còn có thể sử dụng nó để dịch chuyển và phóng đại giống như một cái ống nhòm.
  • Kiểm soát viewport thông qua thuộc tính widthheight trên phần tử svg.
  • Kiểm soát viewBox bằng cách thêm thuộc tính viewBox và phần tử svg. Nó còn có thể được sử dụng trên các phần tử symbol, marker, patternview.
  • Giá trị thuộc tính của viewBox được kết hợp từ bốn tham số cách nhau bởi khoảng trắng.
  • Hai tham số đầu tiên của viewBox kiểm soát sự dịch chuyển và hai tham số sau kiểm soát độ phóng đại.
  • Tăng tham số đầu tiên lên để dịch chuyển về bên phải, giảm để dịch chuyển về bên trái.
  • Tăng tham số thứ hai lên để dịch chuyển xuống dưới, giảm để dịch chuyển lên trên.
  • Tạo nên kích thước của viewBox, đó là hai tham số phía sau, lớn hơn viewport để phóng đại, và nhỏ hơn để thu nhỏ.

Tôi hy vọng bài viết đã làm rõ phần nào viewportviewBox trong SVG. Tạo SVG vui vẻ nhé!

Tìm hiểu thêm về SVG cơ bản

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.