Tạo kiểu đồ họa vectơ có thể mở rộng (SVG) bằng CSS
Hôm nay chúng ta sẽ tiếp tục thảo luận về Đồ họa vectơ có thể mở rộng (SVG), và như chúng ta đã chỉ ra trong bài viết trước, một trong những lợi thế của việc sử dụng SVG là nó có thể được tạo kiểu bằng CSS.
Thuộc tính kiểu dáng SVG
Kiểu dáng SVG về cơ bản hoạt động giống như trong các phần tử HTML thông thường, trên thực tế chúng cũng chia sẻ một số thuộc tính chung. Tuy nhiên, có các thuộc tính khác được dành riêng cho đối tượng SVG có đặc tả riêng ngoài CSS.
Ví dụ, trong phần tử HTML thông thường, chúng ta có thể thêm màu nền bằng màu nền hoặc là lý lịch Thuộc tính CSS. Trong SVG, nó có một chút khác biệt; màu nền được chỉ định với lấp đầy tài sản thay thế. Ngoài ra, đường viền của phần tử được chỉ định bằng Cú đánh tài sản và không phải với biên giới Giống như chúng tôi đã làm trong HTML thông thường, bạn có thể xem danh sách đầy đủ ở đây.
Nếu bạn đã làm việc với trình soạn thảo vector như Adobe Illustrator khá lâu, bạn có thể đoán nhanh rằng cơ chế đặt tên thuộc tính trong SVG có nguồn gốc từ trình chỉnh sửa.
Thực hiện phong cách SVG
Chúng ta có thể sử dụng một trong những cách sau để định kiểu phần tử SVG;
Thuộc tính trình bày
Nếu bạn đã thấy tất cả danh sách thuộc tính SVG, tất cả chúng có thể được thêm trực tiếp vào phần tử để thay đổi phần trình bày của phần tử. Ví dụ sau đây cho thấy cách chúng ta có thể thêm lấp đầy và Cú đánh tài sản trực tiếp trên một trực tràng thành phần;
Hình chữ nhật sẽ trở nên giống như ảnh chụp màn hình bên dưới;
Inline Style Sheet
Chúng tôi cũng có thể thêm phong cách với Phong cách thuộc tính. Trong ví dụ sau chúng tôi cũng sẽ thêm lấp đầy và Cú đánh để trực tràng, nhưng lần này chúng tôi thêm nó vào trong Phong cách và xoay nó với CSS3 biến đổi tài sản, như vậy;.
Hình chữ nhật sẽ quay trong cùng một kết quả, chỉ có điều bây giờ nó cũng được xoay;
Phong cách nội bộ
Nhúng kiểu SVG trong Phong cách yếu tố cũng có thể và không khác với cách chúng tôi đã làm trên HTML thông thường. Ví dụ dưới đây cho thấy cách chúng tôi thêm các kiểu bên trong để ảnh hưởng đến các phần tử SVG trong .html tài liệu.
Tuy nhiên, SVG là ngôn ngữ dựa trên XML, vì vậy khi chúng tôi chuẩn bị thêm biểu định kiểu nội tuyến trong một .svg tài liệu, chúng ta cần đặt khai báo kiểu bên trong cdata, như sau;
Các cdata Ở đây là bắt buộc, vì CSS có thể có > ký tự sẽ xung đột với trình phân tích cú pháp XML. Sử dụng cdata rất được khuyến khích để nhúng kiểu trong SVG, ngay cả khi ký tự xung đột không được đưa ra trong biểu định kiểu.
Biểu định kiểu bên ngoài
Biểu định kiểu bên ngoài cũng hoạt động theo cách tương tự cho các phần tử SVG trong .html tài liệu.
Một lần nữa trong .svg tài liệu, chúng ta cần phải xem biểu định kiểu bên ngoài như là một xml-bản định kiểu, như vậy.
Nhóm yếu tố
Các phần tử SVG có thể được nhóm với
Cả hình chữ nhật và hình tròn sẽ có cùng kết quả.
Suy nghĩ cuối cùng
Chúng tôi đã duyệt qua tất cả các vấn đề thiết yếu về tạo kiểu SVG bằng CSS và đây chỉ là một trong những lợi thế của việc phục vụ đồ họa với SVG. Trong bài tiếp theo, chúng tôi sẽ xem xét một bài khác, vì vậy hãy theo dõi.
- Xem bản demo
- Tải xuống nguồn
