Làm cách nào để thay đổi màu hình ảnh SVG trong CSS?

Question

Gần đây tôi đang làm việc trên một dự án liên quan đến việc sử dụng SVG. Tôi có hai trường hợp sử dụng khác nhau cho chúng; . Tôi nhận thấy có sự khác biệt như thế nào trong cách tôi có thể thay đổi màu của SVG trong từng trường hợp. Có chuyện gì vậy?

Nội dung chính Show

Thiết lập lớp HTML, SVG và img-quote
Thêm bộ lọc CSS vào quote-img
Phần kết luận
Chúng ta có thể thay đổi màu của hình ảnh SVG trong CSS không?
Làm cách nào để thay đổi màu nền của SVG trong CSS?
Làm cách nào để thay đổi màu sắc của hình ảnh trong CSS?
Thuộc tính nào được sử dụng để thay đổi màu SVG trong CSS?

SVG là viết tắt của 'đồ họa véc tơ có thể mở rộng' - đó là một hình ảnh véc tơ đơn giản có kích thước tệp nhỏ và có thể chia tỷ lệ tốt mà không làm giảm độ phân giải. Chúng tôi có thể kiểm soát một số thiết kế của họ bằng cách sử dụng CSS fill và họ phản hồi các tương tác như CSS hover

SVG có thể được bao gồm trong tệp HTML của bạn và trông rất giống một phần tử HTML

Trích dẫn cuối cùng với dấu ngoặc kép SVG màu xanh nhạt

Ok, để tôi chỉ cho bạn cách chúng ta có thể sử dụng các hàm lọc này trong mã của riêng bạn. Điều đầu tiên bạn cần là một số phần tử HTML để áp dụng CSS này vào

Thiết lập lớp HTML, SVG và img-quote

Trang web mà tôi đang làm việc tình cờ được tạo bằng Hugo, một trình tạo trang web tĩnh, nguồn mở, phổ biến được viết bằng Go. Mặc dù nó được viết bằng Go, nhưng nó dựa trên các mẫu để hiển thị phần lớn HTML của trang web, vì vậy mã ví dụ bên dưới sẽ tương đối quen thuộc với bạn nếu bạn biết HTML

Một lưu ý về các mẫu
Nếu bạn đã từng sử dụng các thành phần JSX của React, Node. js với Pug hoặc Handlebars hoặc Jekyll - Các mẫu của Hugo cũng tương tự. Các phần tử HTML với các biến và hàm Go được thêm vào với
  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }
2 để hiển thị thông tin chính xác ở bất cứ nơi nào mẫu được đưa vào

Đây là mã dưới đây cho phần trích dẫn. Vì mục đích và sự rõ ràng của bài đăng này, tôi đã thay thế các biến Go được đưa vào mẫu bằng HTML được tạo

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

3

    <section class="quote-section">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h2 class="text-center quote-text">
              <img
                class="quote-img"
                src="/images/about/quote-left-solid.svg"
                alt="decorative left quotation mark"
              />
              Complexity kills. It sucks the life out of developers.
              <div />
              It makes products difficult to plan, build, test, deliver, and support.
              <img
                class="quote-img"
                src="/images/about/quote-right-solid.svg"
                alt="decorative right quotation mark"
              />
            </h2>
            <div class="text-center">
              <h4 class="text-center quote-source">
                Ray Ozzie
                <span class="quote-source-role">
                  Founder & CEO, Blues Wireless
                </span>
              </h4>
            </div>
          </div>
        </div>
      </div>
    </section>

Mặc dù phần mã này tương đối nhỏ, nhưng nó vẫn đáng được thảo luận. Ngoài các phần tử HTML, còn có khá nhiều lớp CSS, nhiều lớp trong số đó là của Bootstrap, một trong những khung CSS nguồn mở ban đầu để phát triển web đáp ứng

Trong số các lớp tùy chỉnh như

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

4 và

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

5 mà tôi đã sử dụng để tạo kiểu tùy chỉnh, có những lớp như

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

6,

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

7,

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

8 và

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

9. Tất cả các ví dụ sau là các lớp Bootstrap và dùng để thực hiện những việc như văn bản trích dẫn chiếm toàn bộ chiều rộng của trang.

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

8 hoặc căn giữa văn bản bên trong filter1.

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

9

Tuy nhiên, các lớp này không quan trọng, lớp mà bạn muốn tập trung cho bài đăng này là lớp

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

5 được gắn với hai phần tử filter4. đây là hai dấu ngoặc kép SVG đặt trước câu trích dẫn

Lớp

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

5 này là cách chúng ta sẽ đính kèm các hàm CSS filter vào cả hai SVG có dấu ngoặc kép và đảm bảo cả hai đều có màu chính xác để phù hợp với thiết kế

Thêm bộ lọc CSS vào quote-img

Như tôi đã đề cập ở trên, các SVG mà nhà thiết kế của tôi cung cấp cho tôi có màu đen tiêu chuẩn, nhưng trong mô hình thiết kế, các trích dẫn có màu xanh nhạt hơn. màu lục giác filter7

Khi tôi bắt đầu tìm kiếm một giải pháp để thay đổi màu sắc của các SVG này, tôi bắt gặp

Mặc dù có những đề xuất trong chuỗi câu trả lời dẫn đến việc trực tiếp sửa đổi mã nguồn của SVG (không phải điều tôi muốn làm), nhưng may mắn là tôi không phải làm

Giải pháp mà tôi đã áp dụng không chỉ minh họa cách CSS filter có thể được sử dụng để sửa đổi màu của SVG, nó còn liên kết với một CodePen hữu ích, cho phép tôi nhập màu hex mà tôi muốn (filter7) và nó đưa ra bộ lọc CSS chính xác . Và tất cả những gì tôi phải làm là sao chép mã được tạo để sử dụng trong tệp CSS của riêng tôi. Thật là một trình tiết kiệm thời gian tuyệt vời

CodePen để dịch bất kỳ SVG nào sang một màu hex cụ thể. https. // codepen. io/sosuke/pen/Pjoqqp. Chúc phúc cho nhà phát triển đã gặp khó khăn khi thực hiện điều này

Vì vậy, trong tệp SCSS của riêng tôi đã được thêm vào để giúp định kiểu HTML của trang Giới thiệu về chúng tôi, hãy thêm lớp sau và mã được sao chép từ trình tạo mã bộ lọc CSS

Ghi chú. Mặc dù tệp này được hiển thị trong mã ví dụ là SCSS thay vì CSS thuần túy, đối với bài đăng này, nó không tạo ra sự khác biệt. Nó phải là một trực tiếp 1. 1 so sánh

filter0

  .quote-img {
    height: 26px;
    filter: invert(84%) sepia(9%) saturate(1100%) hue-rotate(165deg)
      brightness(88%) contrast(83%);
    margin-bottom: 16px;
  }

Một sự kết hợp cẩn thận của nhiều chức năng bộ lọc như filter1, filter2 và các chức năng khác, và voila - sắc thái chính xác của màu xanh lam để khớp với mã hex

Để làm cho hình ảnh trích dẫn có kích thước và vị trí phù hợp so với văn bản, ngoài việc thay đổi màu sắc của chúng, tôi cũng cần đặt chiều cao của SVG thành filter3 và đặt lề dưới cho chúng là filter4 để đẩy chúng lên trông giống như

Và bây giờ, các SVG có màu chính xác để khớp với mô hình mà không cần sự can thiệp của nhà thiết kế - và có thể dễ dàng thay đổi trong tương lai, nếu cần. Làm thế nào thuận tiện là điều đó?

Phần kết luận

Những thiết kế tuyệt vời có khả năng thu hút sự chú ý của mọi người và giúp họ hiểu được lợi ích của một sản phẩm hoặc công ty cụ thể - và nhiều lần chúng giúp các nhà phát triển đưa những thiết kế này vào cuộc sống học được một hoặc hai điều mới trong quá trình thực hiện

Khi tôi đang xây dựng một trang mới cho trang web của công ty tôi, trong đó có một câu trích dẫn lớn từ người sáng lập công ty của chúng tôi, tôi đã gặp phải tình huống như vậy khi các dấu ngoặc kép cách điệu được cấp cho tôi dưới dạng hình ảnh SVG màu đen, nhưng chúng được hiển thị trong thiết kế

Trước khi yêu cầu nhà thiết kế của tôi dành thời gian tạo lại chúng với màu sắc phù hợp để phù hợp với thiết kế, tôi đã thực hiện một số thao tác sơ bộ trên Google và tìm thấy một giải pháp dựa trên mã, linh hoạt hơn nhiều, tận dụng tối đa CSS filter

Và không chỉ có câu trả lời, mà ai đó còn tạo ra một CodePen có thể khớp với bất kỳ màu hex nào. Chỉ những gì tôi cần, và ở đó cho bất cứ ai được hưởng lợi từ. Cộng đồng phát triển web có thể rất hào phóng

Hãy kiểm tra lại sau vài tuần nữa — Tôi sẽ viết thêm về JavaScript, React, IoT hoặc thứ gì đó khác liên quan đến phát triển web

Cảm ơn vì đã đọc. Tôi hy vọng thủ thuật hay này để chuyển đổi các SVG từ màu này sang màu khác bằng cách sử dụng filter của CSS sẽ hữu ích cho bạn giống như nó đã giúp ích cho tôi. Đó là một cảm giác tuyệt vời với tư cách là một nhà phát triển có khả năng thực hiện các loại thay đổi này thông qua mã

Chúng ta có thể thay đổi màu của hình ảnh SVG trong CSS không?

Chỉnh sửa tệp SVG của bạn, thêm fill="currentColor" vào thẻ svg và đảm bảo xóa mọi thuộc tính fill khác khỏi tệp. Lưu ý rằng currentColor là một từ khóa (không phải là màu cố định được sử dụng). Sau đó, bạn có thể thay đổi màu bằng CSS, bằng cách đặt thuộc tính color của phần tử hoặc từ phần tử gốc .

Làm cách nào để thay đổi màu nền của SVG trong CSS?

Cú pháp của CSS mask-image tương tự như background-image. .

biểu tượng { màu nền. màu đỏ; . url(biểu tượng. svg); . url(biểu tượng. svg);

biểu tượng { màu nền. màu đỏ; . url(biểu tượng. svg) không lặp lại 50% 50%; . url(biểu tượng. svg) không lặp lại 50% 50%;

Làm cách nào để thay đổi màu sắc của hình ảnh trong CSS?

Chúng ta có thể thay đổi màu của hình ảnh PNG bằng cách sử dụng các kiểu CSS sau. bộ lọc. không ai. mơ hồ(). độ sáng(). trái ngược(). bóng đổ (). thang độ xám(). hue-rotate(). đảo ngược(). độ mờ(). bão hòa (). nâu đỏ(). url(). ban đầu. kế thừa ; .