CSS: Thay đổi hình nền SVG. Tạo kiểu SVG bằng CSS. Tính năng và hạn chế

Trang này hướng dẫn cách sử dụng CSS với ngôn ngữ đặc biệt để tạo đồ họa: SVG.

Bạn sẽ tạo một ví dụ nhỏ có thể chạy trong bất kỳ trình duyệt nào hỗ trợ SVG.

Thông tin chung: SVG

SVG(Đồ họa vectơ có thể mở rộng) là một tập hợp con của ngôn ngữ XML và được thiết kế để tạo đồ họa.

SVG có thể được sử dụng cho hình ảnh tĩnh, cũng như cho hoạt ảnh và tạo giao diện người dùng.

Giống như các ngôn ngữ dựa trên XML khác, SVG hỗ trợ sử dụng các biểu định kiểu CSS, cho phép bạn tách các tùy chọn trực quan khác nhau khỏi cấu trúc dữ liệu.

Ngoài ra, các biểu định kiểu mà bạn sử dụng trong các ngôn ngữ đánh dấu tài liệu khác có thể chứa tham chiếu đến đồ họa SVG ở những nơi cần có hình ảnh. Ví dụ: trong biểu định kiểu cho tài liệu HTML, bạn có thể chỉ định liên kết (URL) tới đồ họa SVG trong thuộc tính nền.

Một số chi tiết

Tại thời điểm viết bài (giữa năm 2011), hầu hết các trình duyệt hiện đại đều có hỗ trợ SVG cơ bản, bao gồm Internet Explorer 9 trở lên. Một số tính năng SVG nâng cao không được hỗ trợ hoặc chỉ được hỗ trợ một phần trong một số trình duyệt nhất định. Để biết thêm thông tin về hỗ trợ SVG hiện tại, hãy xem bảng SVG trên caniuse.com hoặc xem bảng tương thích tham chiếu phần tử SVG để biết thông tin về hỗ trợ phần tử riêng lẻ.

Trong các phiên bản khác, bạn có thể thêm hỗ trợ SVG bằng cách cài đặt một plugin bổ sung, chẳng hạn như do Adobe cung cấp.

Để biết thêm thông tin về SVG trong Mozilla, hãy xem trang SVG trên wiki này.

Bắt đầu làm việc: Bản demo SVG

Tạo tài liệu SVG mới dưới dạng tệp văn bản thông thường, doc8.svg. Sao chép và dán nội dung của khối bên dưới, đảm bảo cuộn hết cỡ để sao chép mọi thứ:

Tạo một tệp CSS mới, style8.css. Sao chép và dán nội dung của khối bên dưới, đảm bảo cuộn hết cỡ để sao chép mọi thứ:

/*** Trình diễn SVG ***/ /* trang */ svg ( màu nền: màu be; ) #heading ( cỡ chữ: 24px; độ dày phông chữ: in đậm; ) #caption ( cỡ chữ: 12px; ) /* hoa */ #flower:hover ( con trỏ: crosshair; ) /* gradient */ #fade-stop-1 ( stop-color: blue; ) #fade-stop-2 ( stop-color: trắng; ) /* cánh hoa bên ngoài */ #outer-petals ( opacity: .75; ) #outer-petals .segment-fill ( fill: azure; nét: lightsteelblue; nét rộng: 1; ) #outer-petals .segment-edge ( fill: none; nét: deepskyblue; nét-width: 3; ) #outer-petals .segment:hover > .segment-fill ( fill: mận; nét: none; ) #outer-petals .segment:hover > .segment-edge ( nét: đá phiến; ) /* cánh hoa bên trong */ #inner-petals .segment-fill ( fill: vàng; nét: vàng xanh; chiều rộng nét: 1; ) #inner-petals .segment-edge ( fill: none; nét: yellowgreen; đột quỵ: 9; ) #inner-petals .segment:hover > .segment-fill ( fill: darkseagreen; đột quỵ: none; ) #inner-petals .segment:hover > .segment-edge ( đột quỵ: green; )

Mở tài liệu trong trình duyệt hỗ trợ SVG của bạn. Di chuyển con trỏ chuột lên hình ảnh.

Wiki này không hỗ trợ chèn SVG vào trang nên chúng tôi không thể trình bày ở đây. Hình ảnh sẽ trông như thế này:

Cái gì tiếp theo?

Trong bản demo này, trình duyệt hỗ trợ SVG của bạn đã biết cách hiển thị các phần tử SVG. Bảng định kiểu chỉ thay đổi cách hiển thị theo một cách nào đó. Điều tương tự cũng xảy ra với tài liệu HTML và XUL. Tuy nhiên, CSS có thể được sử dụng cho bất kỳ tài liệu XML nào không có cách mặc định để hiển thị các phần tử. Ví dụ này được hiển thị trên trang sau:

CSS đang trở nên mạnh mẽ hơn mỗi ngày, với nhiều tính năng mới nổi lên giúp việc tạo giao diện người dùng trở nên dễ dàng hơn nhiều. Và điều đó thật tuyệt vời!

Một tính năng như vậy trong CSS là bộ lọc. Hãy thử sử dụng các bộ lọc để làm việc với hình ảnh SVG.

Bộ lọc CSS

Đầu tiên, chúng ta hãy xem xét các bộ lọc. Chúng bao gồm các tính năng sau:

mơ hồ()
độ sáng()
sự tương phản()
bóng đổ()
thang độ xám()
màu sắc-xoay()
đảo ngược()
độ mờ()
bão hòa()
màu nâu đỏ()

Bộ lọc CSS là cách dễ nhất để thực hiện các phép biến đổi cơ bản theo cách hiệu quả với trình duyệt.

Nếu bạn muốn xem từng bộ lọc hoạt động như thế nào, chúng tôi khuyên bạn nên truy cập trang web: cssfilters.co.

Chỉnh sửa nền SVG

Tôi thích sử dụng định dạng SVG (đồ họa vector có thể mở rộng) trên web. SVG là một định dạng hình ảnh tuyệt vời cho web. Khi bạn thêm SVG vào một trang, bạn có quyền truy cập vào mọi thành phần và thuộc tính trong đó. Điều này cho phép bạn thêm hoạt ảnh, thay đổi màu sắc và thêm thông tin một cách linh hoạt. SVG cũng tuyệt vời cho các biểu tượng.

SVG thường được sử dụng làm hình nền. Trong trường hợp này, bạn mất quyền kiểm soát các thành phần của hình ảnh. Bây giờ bạn không thể thay đổi màu sắc hoặc thuộc tính vì SVG trở thành hình ảnh thông thường. Nhưng với sự trợ giúp của bộ lọc CSS, bạn có thể giải quyết vấn đề này.

Điều chỉnh độ sáng

Điều đầu tiên tôi gặp phải khi làm việc với các biểu tượng là cần phải làm tối biểu tượng màu trắng trên nền sáng. Để tránh tạo biểu tượng tối mới, tôi đã sử dụng bộ lọc: độ sáng().

Giá trị độ sáng lớn hơn 1 làm cho phần tử sáng hơn, nhỏ hơn 1 làm cho phần tử tối hơn.

Biểu tượng có màu sắc #000 hoặc rbg(0, 0, 0) sẽ không được làm rõ. Chúng phải có bất kỳ màu nào khác.

Điều chỉnh màu sắc

Chúng tôi đã xem cách thay đổi độ sáng của biểu tượng. Nhưng nếu chúng ta muốn thay đổi màu sắc của biểu tượng thì sao? Trong trường hợp này, bộ lọc sẽ giúp chúng ta màu nâu đỏ, xoay sắc, độ sáng Và bão hòađể tạo ra bất kỳ màu nào chúng ta muốn.

Từ màu trắng, bạn có thể tạo, ví dụ: xanh lam, lục lam và hồng.

Tô màu-hồng ( filter: độ sáng(0.5) nâu đỏ(1) màu sắc-xoay(-70deg) bão hòa(5); .colorize-navy ( filter: độ sáng(0.2) nâu đỏ(1) màu sắc-xoay(180deg) bão hòa( 5 ); ) .colorize-blue ( bộ lọc: độ sáng(0.5) nâu đỏ(1) màu sắc-xoay(140deg) bão hòa(6); )

Khả năng tương thích

Tại thời điểm viết bài, các bộ lọc được hỗ trợ bởi các trình duyệt sau:

Thay vì một kết luận

Đừng bao giờ quên người dùng của bạn. Cho đến nay, các bộ lọc không hoạt động ở mọi nơi. Do đó, không sử dụng các biểu tượng bộ lọc màu trắng trên nền trắng, vì một số người dùng sẽ không nhìn thấy gì. Ngoài ra, đừng quên văn bản thay thế cho hình ảnh.

Bài viết gốc: link Tác giả bài viết: Alex. Loại:
Ngày xuất bản: 01/04/2018

SVG là tiêu chuẩn mới cho hình ảnh vector trong trình duyệt. Các trình chỉnh sửa vectơ như Adobe Illustrator cho phép bạn lưu trực tiếp tệp ở định dạng này và các trình duyệt hiện đại không gặp vấn đề gì khi hiển thị SVG chính xác. Vì đồ họa SVG được tạo thành từ đánh dấu nên chúng có thể được tạo và sửa đổi trong trình soạn thảo văn bản yêu thích mà bạn sử dụng cho HTML. Thậm chí có thể tạo kiểu cho SVG bằng CSS, nhưng có một số điều cần lưu ý ở đây.

Đường phân chia giữa HTML và CSS khá rõ ràng. HTML chịu trách nhiệm về nội dung và cấu trúc, còn CSS đảm nhiệm hình thức của các dự án. Trong SVG dòng này bị mờ. Đây là lý do chính tại sao văn bản và hình dạng trong SVG thường được kiểm soát bằng các thuộc tính phần tử thay vì CSS:

Trong ví dụ này, chúng ta đã vẽ một hình chữ nhật được điền bằng cách sử dụng fill . Màu sắc và độ bền của khung hình chữ nhật bên ngoài được xác định bởi các thuộc tính nét và chiều rộng nét.. Tuy nhiên, hình chữ nhật có thể được tạo kiểu theo cách tương tự bằng cách sử dụng CSS:

Tuy nhiên, điều này không hoạt động cho tất cả các thuộc tính. Bạn sẽ không thể xác định vị trí và giá trị cho chiều rộng và chiều cao theo cách này. Chúng ta sẽ chỉ sử dụng các thuộc tính y, chiều rộng và chiều cao.

Giống như trong HTML, chúng ta có thể làm việc với các lớp và ID trên bất kỳ phần tử nào. Vì vậy, chúng tôi sẽ xác định diện mạo của nhiều thành phần trong SVG bằng cách sử dụng một lớp được tạo kiểu.

Sử dụng các lớp giả

Có thể sử dụng các lớp giả như:hover trong SVG, ngay cả khi kết hợp với thuộc tính chuyển tiếp CSS3.

Bằng cách triển khai ví dụ này, các phần tử di chuột mang lớp ví dụ sẽ khiến màu thay đổi từ đỏ sang xanh. Để tính năng này hoạt động bình thường, hãy đảm bảo rằng SVG không được chèn dưới dạng Img. Tốt hơn nên chọn Nhúng hoặc Iframe:

Sử dụng Img sẽ giúp SVG hiển thị đúng. Tuy nhiên, các hiệu ứng di chuột và chuyển tiếp sẽ bị bỏ qua. Ngoài quá trình chuyển đổi, chúng ta có thể sử dụng phép biến đổi, do đó cho phép các phần tử được thu nhỏ hoặc xoay.

Khi sử dụng CSS3, hãy nhớ thêm tiền tố của nhà cung cấp để hỗ trợ nhiều trình duyệt hiện đại nhất có thể. Mặc dù Chrome và Firefox không gặp vấn đề gì khi hiển thị hoàn hảo nhưng Internet Explorer sẽ từ chối hiển thị các tác phẩm của bạn ngay cả trong phiên bản mới nhất, trong khi nó hoàn toàn có khả năng hiển thị các thuộc tính CSS3 này khi được sử dụng trong HTML.

Truy vấn phương tiện và SVG

Nếu bạn muốn tùy chỉnh SVG của mình để nó có thể thay đổi kích thước, thì chỉ cần sử dụng truy vấn phương tiện trực tiếp trong đó:

Ví dụ này đảm bảo rằng các phần tử của ví dụ lớp sẽ không được hiển thị ngay khi chiều rộng hiển thị giảm xuống dưới 800 pixel. Xin lưu ý rằng điều này không phải là chiều rộng của tài liệu quyết định mà là chiều rộng của phần tử mang SVG của bạn.

Trong ví dụ này, các phần tử của lớp ví dụ sẽ không được hiển thị vì chiều rộng được chỉ định chỉ là 500 pixel. Truy vấn phương tiện trong SVG cũng hữu ích để tối ưu hóa đồ họa cho việc in ấn.


Bài viết chi tiết về tạo kiểu nội dung trong phần tử SVG và khắc phục các vấn đề liên quan.
 Đồ họa ở định dạng SVG đặc biệt thường được sử dụng để tạo biểu tượng và một trong những kỹ thuật phổ biến nhất cho việc này là các họa tiết SVG sử dụng SVG để tạo biểu tượng ở đúng vị trí trong tài liệu.
 Khởi tạo các biểu tượng hoặc bất kỳ nội dung SVG nào khác vào một phần tử gây khó khăn khi thiết kế các bản sao riêng lẻ.  Mục đích của bài viết này là cung cấp cho bạn cái nhìn tổng quan về một số cách có thể khắc phục các hạn chế về thiết kế liên quan đến việc sử dụng  .
 Nhưng trước khi bắt đầu, chúng ta hãy xem nhanh cấu trúc cơ bản và nhóm các thành phần trong SVG, dần dần chuyển sang , DOM và sau đó quay lại CSS.  Chúng ta sẽ xem xét lý do tại sao thiết kế có thể gây ra khó khăn và cách khắc phục chúng.
 Tổng quan nhanh về cấu trúc, nhóm và tham chiếu phần tử SVG trong SVG
 SVG bao gồm 4 thành phần cơ bản để xác định, cấu trúc và liên kết đến nội dung SVG trong tài liệu.  Những phần tử này cho phép tái sử dụng hình ảnh trong khi vẫn giữ cho mã có thể đọc và bảo trì được.  Do tính chất của SVG, một số thành phần này có chức năng tương tự như các lệnh tương ứng trong trình chỉnh sửa đồ họa.
 4 thành phần nhóm và liên kết chính của SVG là:  ,  , Và  .
 Yếu tố (viết tắt của “group”) được dùng để nhóm các tập hợp phần tử đồ họa có liên quan một cách hợp lý.  Về mặt biên tập đồ họa (chẳng hạn như Adobe Illustrator), phần tử Chức năng của nó tương tự như chức năng “Nhóm đối tượng”.  Bạn cũng có thể coi nhóm như một lớp trong trình chỉnh sửa đồ họa.
 Việc nhóm các phần tử rất hữu ích trong trường hợp bạn muốn áp dụng một kiểu cho tất cả các phần tử của một nhóm cũng như khi bạn muốn tạo hoạt ảnh cho tất cả các phần tử của một nhóm trong khi vẫn duy trì mối quan hệ giữa chúng.
 Yếu tố được sử dụng để xác định nhiều thứ, chủ yếu xác định các mẫu như độ dốc, sau đó có thể được sử dụng để điền vào các phần tử SVG khác.  Nó có thể được sử dụng để xác định bất kỳ phần tử nào bạn định sử dụng ở bất kỳ đâu trên khung vẽ.
 Yếu tố kết hợp khả năng Và một cái được sử dụng để nhóm các phần tử lại với nhau nhằm tạo ra một mẫu có thể được tham chiếu ở nơi khác trong tài liệu.  không giống  , không dùng để đặt mẫu;  nó thường được sử dụng để tạo các ký hiệu như biểu tượng, sau đó được sử dụng trong toàn bộ tài liệu.
 Tại phần tử Có một lợi thế quan trọng khác: nó chấp nhận thuộc tính viewBox, cho phép thu phóng trong mọi phạm vi.
 Yếu tố cho phép bạn sử dụng phần tử được xác định trước đó ở bất kỳ đâu trong tài liệu.  Nó cho phép bạn sử dụng lại các phần tử và cung cấp chức năng tương tự như sao chép-dán trong trình chỉnh sửa đồ họa.  Nó có thể được sử dụng như một phần tử đơn lẻ hoặc như một nhóm được chỉ định trong  , hoặc  .
 Để sử dụng một phần tử, bạn cần chuyển một liên kết đến phần tử này, mã định danh là thuộc tính xlink:href và định vị nó bằng cách đặt thuộc tính x và y.  Bạn có thể áp dụng kiểu cho một phần tử và chúng sẽ xếp tầng vào nội dung của phần tử này.
 Nhưng nội dung là gì? ?  Nó nhân bản ở đâu?  Và CSS Cascade hoạt động như thế nào với nó?
 Trước khi chúng tôi trả lời những câu hỏi này và vì chúng tôi chỉ xem nhanh cấu trúc và nhóm SVG, cần đề cập đến một số bài viết sẽ cho phép bạn tìm hiểu thêm về các phần tử này, cũng như thuộc tính viewBox trên một phần tử  :
 Cấu trúc, nhóm và liên kết trong SVG - Các phần tử g, use, defs và ký hiệu
 Tìm hiểu hệ tọa độ SVG (Phần 1): Viewport, viewBox và PreserveAspectRatio
SVG và bóng tối DOM
 Khi bạn đề cập đến một phần tử với , mã của bạn trông giống như thế này:
 
 


 
Một biểu tượng được hiển thị trên màn hình, nội dung của nó được xác định nội bộ , nhưng thực ra đó là nội dung của phần tử , đó là một bản sao  .
 Nhưng phần tử nó chỉ là một phần tử tự đóng - không có nội dung giữa thẻ mở và thẻ đóng, vậy nội dung được sao chép ở đâu?  ?
 Câu trả lời là ở bóng tối DOM(không hiểu sao tôi luôn liên tưởng anh ấy với Batman, tôi không biết tại sao).
 Bóng DOM là gì?
 Shadow DOM giống hệt với DOM thông thường, ngoại trừ việc thay vì là một phần của cây tài liệu chính, các nút DOM bóng đề cập đến một đoạn tài liệu song song với tài liệu chính nhưng không thể truy cập được bằng các tập lệnh và kiểu của nó.  Điều này mang lại cho tác giả khả năng tạo các thành phần mô-đun bằng cách đóng gói các tập lệnh và kiểu.  Nếu bạn đã từng sử dụng phần tử video hoặc đầu vào phạm vi trong HTML5 và không hiểu trình phát video hoặc điều khiển thanh trượt đến từ đâu, thì câu trả lời vẫn giống nhau - Shadow DOM.
 Trong trường hợp phần tử SVG , nội dung mà nó đề cập đến sẽ được sao chép vào một đoạn tài liệu “được lưu trữ” trong .  Trong trường hợp này đây là một máy chủ bóng tối.
 Vì vậy nội dung (bản sao hoặc bản sao của phần tử mà nó đề cập đến) hiện diện bên trong đoạn tài liệu bóng.
 Nói cách khác, nội dung vẫn ở đó nhưng không thể nhìn thấy được.  Giống như nội dung của DOM thông thường, nhưng không thể truy cập được bằng các tính năng cấp cao như bộ chọn CSS và JavaScript, được sao chép vào một đoạn tài liệu được liên kết với  .
 Bây giờ, nếu bạn là nhà thiết kế, bạn có thể đang nghĩ, "Được rồi, tôi hiểu rồi, nhưng có cách nào để kiểm tra tài liệu phụ này và xem nội dung của nó không."  Câu trả lời là có, bạn có thể xem nội dung của Shadow DOM bằng các công cụ phát triển trong Chrome (tính năng này hiện không có trên Firefox).  Nhưng trước tiên, bạn cần kích hoạt trình kiểm tra DOM bóng trong tab Chung của bảng cài đặt.  Điều này được mô tả chi tiết.
 Sau khi bật Kiểm tra Shadow DOM trong Công cụ dành cho nhà phát triển, bạn có thể thấy các phần tử được sao chép trong Hộp công cụ, giống như các phần tử DOM thông thường.  Hình ảnh sau đây hiển thị một phần tử mẫu , tham chiếu nội dung của phần tử .  Xin lưu ý rằng “#shadow-root” và nội dung của nó là bản sao của nội dung  .
 
 Bằng cách sử dụng Công cụ dành cho nhà phát triển Chrome, bạn có thể kiểm tra nội dung của thành phần use bên trong Shadow DOM (“#shadow-root”, dòng này có màu xám).  Ảnh chụp màn hình này kiểm tra logo Codrops từ ví dụ mà chúng ta sẽ xem xét trong phần tiếp theo.
 Nhìn vào mã được kiểm tra, bạn có thể thấy rằng DOM bóng rất giống với DOM thông thường, ngoại trừ cách nó được xử lý bằng CSS và JavaScript của tài liệu chính.  Ngoài ra còn có những khác biệt khác giữa hai điều này mà chúng tôi sẽ không đề cập trong bài viết này do độ dài, vì vậy nếu bạn muốn tìm hiểu thêm, tôi khuyên bạn nên tham khảo các bài viết sau:
 Shadow DOM 101 (bản dịch của Frontender.info)
 Giới thiệu về Shadow DOM (Video)
Với kinh nghiệm hạn chế của tôi với Shadow DOM, tôi xem nó như một DOM thông thường cần được xử lý khác nhau về quyền truy cập CSS và JavaScript vào các phần tử của nó.  Đây là điều quan trọng đối với chúng tôi khi làm việc với SVG: cách tác động đến nội dung bên trong Shadow DOM, vì điều quan trọng là chúng ta có thể tạo kiểu cho nó.  Toàn bộ quan điểm của việc sử dụng đây là khả năng tạo các bản sao khác nhau của một phần tử và trong hầu hết các trường hợp, chúng ta cần có khả năng tạo kiểu cho mỗi bản sao một cách khác nhau.  Ví dụ: đây có thể là biểu trưng có hai chủ đề màu hoặc biểu tượng nhiều màu cho các chủ đề màu khác nhau.  Vì vậy, điều quan trọng đối với chúng ta là có thể thực hiện được điều này bằng CSS.
 Như đã nêu, nội dung của Shadow DOM không thể truy cập được bằng CSS, không giống như DOM thông thường.  Vậy chúng ta tạo kiểu cho nó như thế nào?  Chúng ta không thể sử dụng đường dẫn con cháu như thế này:
Sử dụng path#line ( đột quỵ: #009966; )
Bởi vì chúng tôi không có quyền truy cập vào Shadow DOM bằng bộ chọn CSS thông thường.
 Bạn có thể mong đợi, giống như tôi, rằng các thuộc tính trình bày có tính đặc hiệu cao nhất trong tất cả các quy tắc kiểu dáng.  Xét cho cùng, các kiểu bên ngoài thường được ghi đè bằng các khai báo bên trong và đến lượt chúng, các kiểu này lại bị ghi đè bởi các kiểu thuộc tính nội tuyến - chúng có độ đặc hiệu tối đa và theo đó, có mức độ ưu tiên cao hơn các kiểu khác.  Mặc dù kỳ vọng này có lý nhưng cơ chế hoạt động thực tế lại khác.
 Trên thực tế, các thuộc tính trình bày được coi là “tờ định kiểu tác giả” cấp thấp và chúng bị ghi đè bởi các khai báo kiểu khác: kiểu bên ngoài, kiểu bên trong và kiểu nội tuyến.  Điểm mạnh duy nhất của họ là sự ưu tiên hơn các phong cách kế thừa.  Đó là tất cả.
 Bây giờ chúng ta đã giải quyết xong, hãy quay lại phần tử của chúng ta và nội dung của nó.
 Chúng tôi biết rằng chúng tôi không thể đặt kiểu trong nội bộ sử dụng bộ chọn CSS.
 Nhưng chúng ta cũng biết rằng, cũng như với nguyên tố , kiểu được áp dụng cho sẽ được kế thừa bởi tất cả con cháu của nó (nằm trong Shadow DOM).
 Vì vậy, trước tiên hãy thử thay đổi màu tô của phần tử bên trong bằng cách áp dụng bộ chọn cho chính phần tử đó với kỳ vọng rằng tầng và tính kế thừa sẽ thực hiện công việc của chúng.
 Tuy nhiên, điều này đặt ra một số câu hỏi:
 Màu tô sẽ được kế thừa tất cả con cháu yếu tố , ngay cả những kiểu bạn không muốn áp dụng kiểu cho (nhưng nếu bên trong Nếu bạn chỉ có một phần tử thì vấn đề này sẽ không xảy ra).
 Nếu bạn đã xuất SVG từ trình chỉnh sửa đồ họa hoặc không thể sửa đổi mã SVG thì cuối cùng bạn sẽ làm việc với SVG đã áp dụng thuộc tính trình bày (trừ khi bạn tắt rõ ràng tính năng này khi xuất sang định dạng SVG) và các giá trị trong số các thuộc tính này sẽ được ưu tiên hơn những thuộc tính được kế thừa từ  .
Và ngay cả khi bạn có thể chỉnh sửa mã SVG và loại bỏ chúng, tôi thực sự khuyên bạn không nên làm như vậy vì những lý do sau:
 Việc xóa các thuộc tính để đặt các thuộc tính nhất định sau đó sẽ đặt lại giá trị của các thuộc tính này về mặc định và theo quy tắc, đây là màu đen và nét vẽ (liên quan đến màu sắc).
 Bằng cách đặt lại các giá trị, bạn buộc mình phải tạo kiểu cho toàn bộ tập hợp thuộc tính.
 Các thuộc tính trình bày, được đặt ban đầu, là một phương án dự phòng tuyệt vời trong trường hợp có vấn đề với kiểu bên ngoài.  Nếu CSS không tải, biểu tượng của bạn vẫn trông đẹp.
Vì vậy, chúng tôi có các thuộc tính này, nhưng chúng tôi muốn tạo kiểu khác nhau cho các phiên bản khác nhau của biểu tượng.
 Điều này được thực hiện bằng cách buộc các thuộc tính trình bày kế thừa các kiểu được chỉ định hoặc tìm cách ghi đè các giá trị này.  Để làm được điều này, chúng ta sẽ phải sử dụng toàn bộ sức mạnh của CSS xếp tầng.
 Hãy bắt đầu với những ví dụ đơn giản và dần dần chuyển sang những ví dụ phức tạp.
 Viết lại các giá trị thuộc tính trình bày bằng CSS
 Các thuộc tính trình bày bị ghi đè bởi bất kỳ khai báo kiểu nào.  Chúng ta có thể sử dụng điều này để đảm bảo rằng thuộc tính trình bày nhận được giá trị được kế thừa từ các kiểu  .
 Điều này thật dễ dàng nhờ từ khóa CSS kế thừa.  Hãy xem ví dụ sau - một biểu tượng kem được vẽ bằng một đường viền duy nhất, màu sắc mà chúng ta muốn thay đổi trong các trường hợp khác nhau.  Biểu tượng được tạo bởi Erin Agnoli từ Dự án Danh từ.
 
 
Nội dung của biểu tượng kem (đường dẫn) của chúng tôi được xác định bên trong phần tử , có nghĩa là nó sẽ không được hiển thị trên canvas theo mặc định.
 Chúng tôi hiển thị nhiều phiên bản của một biểu tượng bằng cách sử dụng  .
 

 
Chúng tôi đặt chiều rộng và chiều cao của các biểu tượng bằng CSS.  Tôi đang sử dụng cùng kích thước với viewBox nhưng chúng không nhất thiết phải giống nhau.  Tuy nhiên, để tránh khoảng trắng dư thừa trong SVG, hãy đảm bảo bạn duy trì tỷ lệ khung hình.
Biểu tượng (chiều rộng: 100px; chiều cao: 125px; )
Với mã này, chúng tôi nhận được kết quả sau:
 
 Lưu ý rằng nhờ có thêm các đường viền màu đen xung quanh SVG của chúng tôi, bạn có thể thấy đường viền của từng SVG, bao gồm cả đường viền đầu tiên mà nội dung không được hiển thị. Hãy nhớ: tài liệu SVG mà ký hiệu bạn đã xác định sẽ được hiển thị trên trang nhưng không có nội dung.  Để ngăn chặn điều này, hãy sử dụng thuộc tính display: none trên SVG đầu tiên.  Nếu bạn không ẩn SVG với các định nghĩa biểu tượng, nó sẽ xuất hiện trên màn hình ngay cả khi bạn không chỉnh kích thước nó - nó sẽ chiếm kích thước mặc định là 300 x 150 pixel (đây là giá trị mặc định cho các phần tử không được thay thế trong CSS) và cuối cùng bạn sẽ có một khối trống trên màn hình mà bạn không cần.
 Bây giờ hãy thử thay đổi màu tô cho từng phiên bản biểu tượng:
Use.ic-1 ( điền: skyblue; ) use.ic-2 ( điền: #FDC646; )
Màu tô của các biểu tượng vẫn không thay đổi vì màu kế thừa bị ghi đè bởi thuộc tính fill="#000" trong phần tử đường dẫn.  Để ngăn điều này xảy ra, chúng ta cần buộc đường dẫn kế thừa màu:
Đường dẫn Svg ( điền: kế thừa; )
Thì đấy!  Màu sắc được gán cho các phần tử bây giờ được áp dụng cho đường dẫn của mỗi người trong số họ.  Hãy xem bản demo và thử nghiệm các giá trị bằng cách tạo các phiên bản và cung cấp cho chúng các màu khác nhau:
 Bây giờ kỹ thuật này hoạt động sau khi chúng tôi buộc nội dung kế thừa phong cách  Nhưng trong nhiều trường hợp đây không hẳn là điều bạn cần.  Có nhiều phương pháp thiết kế khác, bây giờ chúng ta sẽ chuyển sang một số phương pháp trong số đó.
 Thiết kế nội dung sử dụng thuộc tính CSS all
 Cách đây một thời gian, khi đang làm việc với một biểu tượng được kích hoạt bằng , tôi cần một trong các phần tử bên trong nó để kế thừa tất cả các kiểu , chẳng hạn như fill , đột quỵ , chiều rộng nét , độ mờ và thậm chí biến đổi .  Vì vậy, tôi cần kiểm soát tất cả các thuộc tính này thông qua CSS, đồng thời giữ tất cả các thuộc tính trình bày trong phần đánh dấu làm dự phòng.
 Nếu gặp một tác vụ tương tự, chắc hẳn bạn sẽ nghĩ sẽ mất quá nhiều thời gian để làm mọi thứ trong CSS:
Path#myPath ( fill: kế thừa; đột quỵ: kế thừa; chiều rộng nét: kế thừa; biến đổi: kế thừa; /* ... */ )
Sau khi xem đoạn mã này, bạn sẽ nhận thấy một mẫu, điều đó có nghĩa là sẽ hợp lý khi kết hợp tất cả các thuộc tính được chỉ định thành một và đặt nó thành kế thừa.
 May mắn thay, thuộc tính CSS all có thể giúp chúng ta.  Sách tham khảo CSS của tôi đề cập đến việc sử dụng thuộc tính all để tạo kiểu cho SVG, nhưng nó đáng để xem lại.
 Sử dụng thuộc tính all chúng ta có thể làm điều này:
Đường dẫn#myPath ( all: kế thừa; )
Điều này hoạt động tốt trong tất cả các trình duyệt hỗ trợ tất cả , nhưng có một điều quan trọng cần xem xét: khai báo này yêu cầu phần tử kế thừa tất cả các thuộc tính của phần tử mẹ, bao gồm cả những thuộc tính mà bạn không muốn phần tử có.  Vì vậy, trừ khi bạn muốn tất cả các thuộc tính CSS được tạo kiểu, điều này sẽ không hiệu quả với bạn - đó là giải pháp cuối cùng và chỉ phù hợp một phần khi bạn có một phần tử chưa được định kiểu và có toàn quyền kiểm soát các thuộc tính của nó trong CSS.  Nếu bạn sử dụng khai báo này và không xác định giá trị cho tất cả thuộc tính CSS, chúng sẽ xếp tầng cho đến khi tìm thấy giá trị để kế thừa, trong hầu hết các trường hợp là kiểu mặc định của trình duyệt.
 Lưu ý rằng điều này chỉ áp dụng cho các thuộc tính có thể được đặt bằng CSS, không áp dụng cho các thuộc tính chỉ có thể được đặt trong SVG.  Nếu thuộc tính có thể được đặt bằng CSS, nó sẽ kế thừa các kiểu, nếu không thì không.
 Khả năng cho phép kế thừa các thuộc tính trình bày cho tất cả các kiểu , nhưng điều gì sẽ xảy ra nếu bạn có một biểu tượng bao gồm một số thành phần và bạn không muốn tất cả chúng kế thừa cùng một màu tô?  Điều gì sẽ xảy ra nếu bạn muốn áp dụng nhiều màu tô khác nhau cho những đứa trẻ khác nhau?  Chỉ định một kiểu trong không còn phù hợp nữa.  Chúng ta cần một cái gì đó khác biệt để sắp xếp các màu sắc phù hợp cho các phần tử phù hợp.
 Sử dụng biến CSS currentColor để tạo kiểu cho nội dung 
 Việc sử dụng biến CSS currentColor kết hợp với kỹ thuật được mô tả ở trên cho phép bạn xác định hai màu cho một phần tử thay vì chỉ một màu.  Fabrice Weinberg đã viết về điều này một năm trước.
 Ý tưởng là áp dụng đồng thời cho các thuộc tính điền và tô màu, sau đó xếp các thuộc tính đó vào nội dung , sử dụng các khả năng của biến currentColor.  Hãy xem một số mã ví dụ để hiểu cách nó hoạt động.
 Giả sử chúng ta muốn thiết kế logo Codrops tối giản này bằng 2 màu - một cho mặt trước và một cho mặt sau.
 
 Trước tiên, hãy bắt đầu với mã cho hình ảnh này: chúng ta có một biểu tượng chứa mô tả về biểu tượng và ba trường hợp , tạo ba bản sao của logo.
 



 
Nếu chúng ta đặt màu tô trong phần tử đối với mỗi trường hợp, màu này sẽ được cả hai đốm màu kế thừa, đây không phải là mục tiêu của chúng tôi.
 Vì vậy, thay vì xác định màu tô và xếp tầng theo cách thông thường, chúng ta sẽ sử dụng biến currentColor để đốm màu nhỏ hơn ở nền trước sẽ có màu khác và chúng ta sẽ đặt giá trị đó bằng thuộc tính color.
 Trước tiên, chúng ta cần chèn currentColor vào nơi chúng ta muốn áp dụng màu này - đây sẽ là vị trí trong phần đánh dấu nơi biểu tượng được xác định, nghĩa là bên trong .  Bây giờ đoạn này trông như thế này:
 
 
Sau đó, chúng ta cần loại bỏ thuộc tính tô màu trình bày khỏi giọt thứ hai và để nó kế thừa màu tô từ phần tử sử dụng kế thừa.
 Nếu chúng ta sử dụng từ khóa kế thừa để buộc các thuộc tính trình bày kế thừa các giá trị từ , cả hai phần sẽ kế thừa cùng một giá trị và currentColor sẽ không có hiệu lực.  Do đó, trong kỹ thuật này, chúng ta cần loại bỏ thuộc tính mà chúng ta muốn đặt thông qua CSS và chỉ để lại thuộc tính mà chúng ta sẽ sử dụng currentColor .
 
 
Bây giờ, bằng cách sử dụng các thuộc tính tô màu và tô màu trong Chúng tôi sẽ thêm kiểu vào phần thả từ logo:
Codrops-1 ( điền: #4BC0A5; màu: #A4DFD1; ) .codrops-2 ( điền: #0099CC; màu: #7FCBE5; ) .codrops-3 ( điền: #5F5EC0; màu: #AEAFDD; )
Mỗi phần tử có giá trị tô và màu riêng.  Trong mỗi màu, màu tô được xếp tầng để tô vào đường dẫn đầu tiên không có thuộc tính tô màu và thuộc tính màu color được sử dụng để đặt thuộc tính tô màu trong đường dẫn thứ hai.
 Vì vậy, điều đã xảy ra là giá trị màu hiện tại bị rò rỉ vào kiểu nội dung của phần tử bằng cách sử dụng biến currentColor.  Thật duyên dáng phải không?
 Đây là bản demo với mã được sử dụng:
 Kỹ thuật hai màu này rất phù hợp cho các logo hai màu.  Trong bài viết của mình, Fabrice đã tạo ra ba phiên bản khác nhau của logo Sass, thay đổi màu sắc của văn bản tương ứng với nền.
 Từ khóa currentColor là biến CSS duy nhất hiện có.  Tuy nhiên, nếu chúng ta có nhiều biến hơn, chúng ta có thể sử dụng chúng để điền nhiều giá trị hơn vào nội dung không? ?  Vâng chúng ta có thể.  Amelia Bellamy-Royds đã giới thiệu ý tưởng này trên blog Codepen của cô ấy một năm trước.  Hãy xem nó hoạt động như thế nào.
 Tương lai: Thiết kế nội dung sử dụng các biến CSS
 
 Mã robot chứa tất cả các màu tạo nên nó:
 
 
Bây giờ, chúng ta sẽ không sử dụng các biến CSS làm giá trị thuộc tính điền cho mỗi đường viền.  Thay vào đó, chúng ta sẽ sử dụng chúng làm màu tô bằng thuộc tính CSS fill, giữ nguyên tất cả các thuộc tính tô màu.  Các thuộc tính này sẽ được sử dụng làm dự phòng cho các trình duyệt không hỗ trợ biến CSS - hình ảnh sẽ xuất hiện như thể các biến CSS không hoạt động.
 Với các biến được thêm vào, mã sẽ như sau:
 
 
Vì thẻ kiểu nội tuyến ghi đè các thuộc tính trình bày nên các trình duyệt hỗ trợ biến CSS sẽ sử dụng các biến này để đặt màu tô.  Các trình duyệt không hỗ trợ chúng sẽ sử dụng thuộc tính điền.
 Tiếp theo chúng ta cần thiết lập giá trị cho các biến trong CSS.  Nhưng trước tiên chúng ta khởi tạo hình ảnh bằng cách sử dụng  :
 
 
Sau đó, chúng ta sẽ đặt giá trị của các biến sẽ sử dụng để chúng có thể xếp tầng theo nội dung của nó.  Những màu sắc bạn chọn sẽ tạo nên bảng màu của bức vẽ.  Vì rô-bốt của chúng tôi sử dụng ba màu cơ bản nên chúng tôi sẽ gọi chúng là màu chính, màu phụ và màu cấp ba.
#robot-1 ( --primary-color: #0099CC; --secondary-color: #FFDF34; --tertiary-color: #333; )
Bạn vẫn có thể sử dụng các thuộc tính tô màu và tô màu kết hợp với các biến này, nhưng bạn có thể thoát khỏi nó một cách bình thường.  Vì vậy, với màu sắc được chỉ định trong các biến của chúng tôi, robot trông như thế này:
 
 Bạn có thể sử dụng bao nhiêu bản sao của hình ảnh tùy thích và đặt mỗi bản sao đó thành một tập hợp các màu khác nhau, tạo ra các chủ đề khác nhau.  Điều này hữu ích một phần khi bạn muốn tạo kiểu cho logo theo nhiều cách khác nhau tùy thuộc vào ngữ cảnh và các trường hợp tương tự khác.
 Như đã đề cập, các trình duyệt không hỗ trợ biến CSS sử dụng các thuộc tính trình bày nhất định làm dự phòng và các trình duyệt hỗ trợ biến CSS sẽ sử dụng chúng để điền thuộc tính điền và ghi đè thuộc tính.  Nhưng điều gì sẽ xảy ra nếu trình duyệt hỗ trợ các biến CSS nhưng bạn lại quên đặt các biến này theo kiểu hoặc đặt sai giá trị?
 Đối với robot hipster của chúng tôi, chúng tôi đặt ba biến và chỉ một số mảnh của nó không phụ thuộc vào chúng - xét cho cùng, ban đầu nó được phát triển theo chủ đề có thể có.  Vì vậy, nếu bạn chạy mã này trong trình duyệt hỗ trợ các biến CSS và xóa tất cả các khai báo khai báo các biến đó, bạn sẽ nhận được kết quả sau:
 
 Nếu giá trị biến không được đặt hoặc không chính xác, trình duyệt sẽ sử dụng màu mặc định, thường là màu đen để tô và vẽ nét trong SVG.
 Một cách giải quyết cho vấn đề này là đặt màu khác làm màu dự phòng cho các trình duyệt hỗ trợ.  Cú pháp biến CSS cho phép bạn thực hiện điều này: Thay vì chuyển tên biến làm đối số cho var(), bạn chuyển hai đối số được phân tách bằng dấu phẩy - tên biến và tên dự phòng, trong trường hợp này là giá trị cho thuộc tính trình bày.
 Vì vậy, bây giờ mã robot của chúng tôi trông như thế này:
 
 
Và đó là tất cả.  Nếu bất kỳ biến nào không được đặt giá trị thì trình duyệt sẽ luôn có một bộ màu làm dự phòng.  Tuyệt vời.
 Sử dụng kỹ thuật này, bạn có thể hiển thị robot này ở bất cứ đâu trên trang bằng cách sử dụng , gán các màu khác nhau cho từng phiên bản và kết quả là tạo ra các chủ đề màu khác nhau.
 Bạn có thể thử nghiệm bản demo, tạo bao nhiêu bản sao của robot tùy thích và tô màu nó bằng bất kỳ màu nào - chỉ cần nhớ rằng bạn phải sử dụng trình duyệt hỗ trợ các biến CSS để thực hiện việc này:
 Nếu bạn xem bản demo này trong trình duyệt hỗ trợ các biến CSS, bạn sẽ thấy phiên bản màu xanh và màu vàng của robot cùng với các phiên bản khác, giống như chúng tôi đã đặt trong các biến CSS.  Nếu không, bạn sẽ thấy ba rô-bốt giống hệt nhau có màu dự phòng.
 Tổng hợp
 Đây là một bài viết tuyệt vời.
 Sử dụng sức mạnh của CSS Cascade, tạo kiểu nội dung được lưu trữ trong Shadow DOM trở nên ít phức tạp hơn.  Và với các biến CSS (currentColor hoặc thuộc tính tùy chỉnh), chúng ta có thể tiếp cận Shadow DOM và tùy chỉnh đồ họa theo cách chúng ta muốn, đồng thời tạo dự phòng trong trường hợp có sự cố.
 Cá nhân tôi thực sự thích sự kết hợp giữa các biến CSS và SVG.  Tôi thích chức năng kết hợp của chúng, đặc biệt là về mặt tạo cơ chế dự phòng.
 Chúng tôi cũng có thể nhận được những cách khác để tạo kiểu cho nội dung. trong tương lai, khi các cuộc thảo luận tiếp tục về việc sử dụng biến CSS làm tham số SVG - vì vậy bài viết này không đề cập đến mọi thứ cần tìm hiểu về chủ đề này.
 Làm việc với nội dung SVG có thể tái sử dụng là một trong những phần phức tạp của SVG, nó liên quan đến hành vi và vị trí của mã được sao chép.  Có rất nhiều vấn đề liên quan nảy sinh ở đây có thể trở thành chủ đề của các bài viết riêng.