Chức năng xoay đồ họa vector có thể mở rộng
Xoay hình ảnh sẽ thay đổi góc mà hình ảnh được hiển thị tại. Đối với đồ họa đơn giản, điều này có thể thêm một số loại và sự quan tâm đến những gì có thể khác là một hình ảnh đơn giản hoặc nhàm chán. Như với tất cả các phép biến đổi, xoay hoạt động như một phần của hoạt ảnh hoặc cho một hình ảnh tĩnh. Học cách sử dụng xoay trong SVG, hoặc Scalable Vector Graphics , cho phép bạn yêu cầu một góc riêng biệt cho thiết kế của hình dạng của bạn. Chức năng xoay SVG hoạt động để biến hình ảnh theo một trong hai hướng.
Giới thiệu về Xoay
Chức năng xoay là tất cả về góc của đồ họa. Khi bạn thiết kế một hình ảnh SVG , bạn sẽ tạo ra một mô hình tĩnh có thể sẽ ngồi ở một góc truyền thống. Ví dụ: một hình vuông sẽ có hai cạnh dọc theo trục X và hai bên dọc theo trục Y. Với xoay, bạn có thể lấy cùng một hình vuông đó và biến nó thành một hình kim cương.
Chỉ với một hiệu ứng, bạn đã đi từ một hộp rất điển hình (vốn rất phổ biến trên các trang web) thành một viên kim cương, vốn không phổ biến chút nào và chưa thêm một số hình ảnh thú vị vào thiết kế. Xoay cũng là một phần của khả năng hoạt hình trong SVG. Một vòng tròn có thể biến liên tục trong khi được hiển thị. Chuyển động này có thể thu hút sự chú ý của khách truy cập và giúp bạn tập trung trải nghiệm của họ vào khu vực chính hoặc các yếu tố trong thiết kế.
Xoay hoạt động trên lý thuyết rằng một dấu chấm trên hình ảnh sẽ vẫn cố định. Hãy tưởng tượng một mảnh giấy gắn liền với các tông bằng một cái chốt. Vị trí ghim là điểm cố định. Nếu bạn xoay giấy bằng cách lấy một cạnh và xoay nó theo chiều kim đồng hồ hoặc chuyển động ngược chiều kim đồng hồ, chốt đẩy không bao giờ di chuyển, nhưng hình chữ nhật vẫn thay đổi góc. Giấy sẽ quay, nhưng điểm cố định của chân vẫn không thay đổi. Điều này rất giống với cách chức năng xoay hoạt động.
Xoay Cú pháp
Với xoay, bạn liệt kê góc quay và tọa độ của khu vực cố định.
transform = "rotate (45,100,100)"Góc quay là điều đầu tiên bạn thêm vào. Trong mã này, góc quay là 45 độ. Điểm trung tâm là thứ bạn sẽ thêm vào tiếp theo. Ở đây, điểm trung tâm đó nằm ở tọa độ 100, 100. Nếu bạn không nhập tọa độ vị trí trung tâm, chúng sẽ mặc định là 0,0. Trong ví dụ dưới đây, góc sẽ vẫn là 45 độ, nhưng vì điểm trung tâm chưa được thiết lập, nó sẽ mặc định là 0,0.
transform = "rotate (45)"Theo mặc định, góc đi về phía bên phải của biểu đồ. Để xoay hình theo hướng ngược lại, bạn sử dụng dấu trừ để liệt kê giá trị âm.
transform = "rotate (-45)"Một vòng quay 45 độ là một phần tư kể từ khi các góc được dựa trên một vòng tròn 360 độ. Nếu bạn liệt kê cuộc cách mạng là 360, hình ảnh sẽ không thay đổi bởi vì bạn đang thực sự lật nó theo một vòng tròn đầy đủ, vì vậy kết quả cuối cùng sẽ giống hệt với hình thức bạn bắt đầu.