Màu svg CSS

người hướng dẫn. [00. 00] Tại đây, bạn có thể thấy đoạn biểu tượng SVG bên trong. Nếu chúng ta nhìn kỹ hơn, chúng ta có thể thấy rằng màu biểu tượng SVG không khớp với màu phông chữ. Chúng ta có thể dễ dàng khắc phục điều này bằng cách áp dụng một màu khác cho nét thuộc tính CSS của SVG. Hãy để tôi nhanh chóng thay đổi nó qua nó để chứng minh điều đó

[00. 23] Mặc dù điều này có vẻ tốt ở đây, nhưng đôi khi, bạn có thể làm điều gì đó khác biệt và chỉ muốn sử dụng màu phông chữ hiện tại. May mắn thay, điều này có thể thực hiện được bằng cách sử dụng từ khóa CSS current color. thì đấy. Chúng tôi thấy màu sắc bây giờ khớp với nhau

[00. 40] Bây giờ chúng ta có thể thay đổi màu của văn bản. Như bạn sẽ thấy, nét biểu tượng SVG sẽ luôn khớp với màu phông chữ. Điều này rất hữu ích, đặc biệt nếu bạn tạo các thành phần có thể tái sử dụng bằng thư viện giao diện người dùng JavaScript

[00. 56] Một điều nữa cần biết, bạn có thể sử dụng màu hiện tại cho mọi thuộc tính CSS chấp nhận một màu

Nếu bạn đang ở đây, có lẽ bạn đang tìm kiếm một giải pháp đơn giản để thay đổi màu biểu tượng SVG, theo một cách đơn giản để thực hiện

Bài đăng này cho biết cách thực hiện việc này và thậm chí còn có phần thưởng SCSS, điều đó sẽ giảm nó thành một dòng mã

Cùng một biểu tượng theo phong cách khác nhau - thậm chí có thể "làm động" biểu tượng bằng nền GIF hoặc khung hình chính CSS

Vậy hãy bắt đầu

Kỹ thuật

Kỹ thuật này sử dụng thẻ

.some-icon {
  height: 10px;
  width: 10px;
  background-color: $default-text;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-image: url("/assets/icons/calendar.svg");
}

3 với mask-image và background-color, nó sẽ không liên quan khi

• Bạn muốn sử dụng thẻ

  .some-icon {
    height: 10px;
    width: 10px;
    background-color: $default-text;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-image: url("/assets/icons/calendar.svg");
  }

  4 làm phần tử html cho biểu tượng vì không thể thao tác với nó bằng CSS
• Triển khai nội tuyến SVG, trong trường hợp này có lẽ có nhiều kỹ thuật phù hợp hơn

div

Phần tử html cho biểu tượng sẽ là một div, Điều này sẽ cho phép chúng tôi thao tác với SVG bằng CSS và triển khai cơ bản trong html so với SVG nội tuyến

hình ảnh mặt nạ

Chúng tôi sẽ sử dụng mặt nạ cho biểu tượng, do đó để SVG che div và tạo cấu trúc cho nó

màu nền

Màu của biểu tượng được lấy từ màu nền của div, bằng cách hiển thị thông qua cấu trúc của SVG

Thực hiện cơ bản nhất

Cách triển khai cơ bản nhất là một lớp duy nhất có tất cả các thuộc tính CSS cần thiết để áp dụng cho div

mục lục. html

Phong cách. css

.some-icon {
  height: 10px;
  width: 10px;
  background-color: $default-text;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-image: url("/assets/icons/calendar.svg");
}

Triển khai nâng cao

Xác định một lớp cho tất cả các thuộc tính phổ biến trong

.some-icon {
  height: 10px;
  width: 10px;
  background-color: $default-text;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-image: url("/assets/icons/calendar.svg");
}

0, đối với các thuộc tính không phổ biến như chiều cao, chiều rộng, màu nền và hình ảnh mặt nạ, hãy thêm một lớp cụ thể

mục lục. html

Phong cách. css

.svg-icon.calander {
  height: 10px;
  width: 10px;
  background-color: $default-text;
  mask-image: url("/assets/icons/calendar.svg");
}

toàn cầu. css

.svg-icon {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

Triển khai dành cho chuyên gia — mixin

Mixins cho phép bạn xác định các kiểu có thể được sử dụng lại trong toàn bộ biểu định kiểu của bạn. Chúng giúp bạn dễ dàng tránh sử dụng các lớp phi ngữ nghĩa như

.some-icon {
  height: 10px;
  width: 10px;
  background-color: $default-text;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-image: url("/assets/icons/calendar.svg");
}

1 và phân phối các bộ sưu tập kiểu trong thư viện.
— Tài liệu chính thức của Sass

Chúng tôi sẽ tạo một mixin bằng SCSS. Mixin sẽ lấy đối số cho tất cả các thuộc tính không phổ biến

biến. scss

@mixin svg-icon($path, $height, $width, $color ) {
  height: $height;
  width: $width;
  background-color: $color;
  mask-image: url($path); 
  background-size: cover;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

mục lục. html

________số 8

Phong cách. scss

.calendar {
  @include svg-icon("/assets/icons/calendar.svg", 20px, 20px,   #818aac);
}

Các mixin được đưa vào ngữ cảnh hiện tại bằng cách sử dụng quy tắc

.some-icon {
  height: 10px;
  width: 10px;
  background-color: $default-text;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-image: url("/assets/icons/calendar.svg");
}

2, được viết là

.some-icon {
  height: 10px;
  width: 10px;
  background-color: $default-text;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-image: url("/assets/icons/calendar.svg");
}

3 hoặc

.some-icon {
  height: 10px;
  width: 10px;
  background-color: $default-text;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-image: url("/assets/icons/calendar.svg");
}

4, với tên của mixin được bao gồm.
— Tài liệu chính thức của Sass

Ví dụ trực tiếp

Để kết luận

Đây là một triển khai cơ bản và rất hữu ích, sẽ giữ cho thư mục nội dung và mã của bạn ở mức tối thiểu nhất có thể

Làm cách nào để tô màu SVG trong CSS?

Làm cách nào để thay đổi màu đường dẫn SVG trong CSS?

Tôi có thể thay đổi màu nền của SVG trong CSS không?

Bạn có thể thay đổi màu sắc trên tệp SVG không?