Chúng tôi đã biết rằng một hạn chế của việc sử dụng để chèn một chút SVG là bạn không thể viết các bộ chọn CSS phức hợp ảnh hưởng đến nó. Ví dụ:
Ranh giới DOM bóng đó ngăn các bộ chọn như
/* nope */ .parent .child ( )khỏi làm việc. Có lẽ một ngày nào đó chúng ta sẽ có một bộ chọn CSS hoạt động để thâm nhập vào ranh giới DOM bóng đó, nhưng khi viết bài này, nó vẫn chưa ở đây.
Bạn vẫn có thể đặt màu tô trên hình cha mẹ và điều đó sẽ phân tầng xuống, nhưng điều đó chỉ mang lại cho bạn một màu (hãy nhớ không đặt fillthuộc tính trình bày trên các hình dạng đó!).
Fabrice Weinberg đã nghĩ ra một kỹ thuật nhỏ gọn để có được hai màu, khai thác currentColortừ khóa trong CSS.
Đặt thuộc tính CSS điền vào bất kỳ hình dạng nào bạn thích thành hiện tại
.shape-1, .shape-2 ( fill: currentColor; )Bằng cách đó, khi bạn đặt thuộc tính màu trên cấp độ gốc , thuộc tính này cũng sẽ phân tầng. Nó sẽ không tự làm bất cứ điều gì (trừ khi bạn có trong đó), nhưng currentColordựa trên cơ sở colorđể bạn có thể sử dụng nó cho những việc khác.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Bản giới thiệu:
Xem Biểu trưng Pen CodePen dưới dạng Inline SVG của Chris Coyier (@chriscoyier) trên CodePen.