Coloring SVGs in CSS Background Images

Tôi thích sử dụng SVG trong Css nhưng nó thật sự khó khăn để có thể thay đổi màu theo ý muốn với css. Sau đây là một số cách để làm việc này.

Sử dụng SVG trong css backgrounds cho phép bạn sử dụng các tính năng tuyệt vời của css như chỉnh kích thước và vị trí của các thành phần. Nó giúp cho việc thay đổi kích thước của SVG đơn giản hơn bởi hình ảnh dễ dàng thay đổi kích thước thuộc tính.

Ngoài ra nó còn giúp nâng cao hiệu năng của inline SVG. Một SVG trong một hình ảnh nền có thể được cached lại. Sử dụng hình ảnh và nhúng SVG như một dữ liệu URI có thể giúp nâng cao hiệu năng.

CSS masks Đây là hàm yêu thích của tôi, nhưng trình duyệt của bạn có thể cần phải nâng cấp để dùng nó. Với mỗi thuộc tính được tạo ra thì sẽ được áp dụng cho một phần tử. Ở khắp mọi nơi mask có thể làm mờ, rõ ràng hoặc ở dưới một hình ảnh được hiển thị. Cú pháp của CSS mask-image tương tự với background-image.

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

Ở đây tôi sử dụng SVG như là một mask. Lấp đầy khoảng trống của icon trong SVG không thật sự quan trọng bởi vì nó đánh dấu lớp nền bằng màu đỏ. Từ đó kết quả hiển thị ra là icon màu đỏ. Với webkit tôi sử dụng prefix.

Nền của bạn có thể là màu sắc, hình ảnh hoặc có thể là bất kỳ cái gì.

<div class="wrap">
    <div class="icon icon-red"></div>
    <div class="icon icon-orange"></div>
    <div class="icon icon-yellow"></div>
    <div class="icon icon-green"></div>
    <div class="icon icon-blue"></div>
    <div class="icon icon-indigo"></div>
    <div class="icon icon-violet"></div><br/>

    <div class="icon icon-cyan"></div>
    <div class="icon icon-magenta"></div>
    <div class="icon icon-lime"></div>
    <div class="icon icon-olive"></div>
    <div class="icon icon-maroon"></div>
    <div class="icon icon-purple"></div><br/>

    <div class="icon icon-white"></div>
    <div class="icon icon-gray10"></div>
    <div class="icon icon-gray20"></div>
    <div class="icon icon-gray30"></div>
    <div class="icon icon-gray40"></div>
    <div class="icon icon-gray50"></div>
    <div class="icon icon-gray60"></div>
    <div class="icon icon-gray70"></div>
    <div class="icon icon-gray80"></div>
    <div class="icon icon-gray90"></div>
    <div class="icon icon-black"></div><br/>

    <div class="icon icon-gradient"></div>
    <div class="icon icon-kitten"></div>
    <div class="icon icon-animation"></div>
  </div>
</div>

.icon {
  awidth: 48px;
  height: 48px;
  display: inline-block;

  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.icon-red { background-color: red; }
.icon-orange { background-color: orange; }
.icon-yellow { background-color: yellow; }
.icon-green { background-color: green; }
.icon-blue { background-color: blue; }
.icon-indigo { background-color: indigo; }
.icon-violet { background-color: violet; }

.icon-cyan { background-color: cyan; }
.icon-magenta { background-color: magenta; }
.icon-lime { background-color: lime; }
.icon-olive { background-color: olive; }
.icon-maroon { background-color: maroon; }
.icon-purple { background-color: purple; }

.icon-white { background: white; }
.icon-gray10 { background: #e5e5e5; }
.icon-gray20 { background: #ccc; }
.icon-gray30 { background: #b2b2b2; }
.icon-gray40 { background: #999; }
.icon-gray50 { background: #7f7f7f; }
.icon-gray60 { background: #666; }
.icon-gray70 { background: #4c4c4c; }
.icon-gray80 { background: #333; }
.icon-gray90 { background: #191919; }
.icon-black { background: black; }

.icon-gradient {
  background: -webkit-radial-gradient(50% 50%, red, white);
  background: radial-gradient(50% 50%, red, white);
}

.icon-kitten {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/grumpy.jpeg) 50% 0%;
  background-size: cover;
}

.icon-animation {
  background: red;
  -webkit-animation: ❤ 6.66s infinite linear;
  animation: ❤ 6.66s infinite linear;
}

@-webkit-keyframes ❤ {
  0% { background-color: red; }
  16% { background-color: orange; }
  32% { background-color: yellow; }
  48% { background-color: green; }
  60% { background-color: blue; }
  72% { background-color: indigo; }
  84% { background-color: violet; }
}

@keyframes ❤ {
  0% { background-color: red; }
  16% { background-color: orange; }
  32% { background-color: yellow; }
  48% { background-color: green; }
  60% { background-color: blue; }
  72% { background-color: indigo; }
  84% { background-color: violet; }
}

/* LAYOUT */
html, body { height: 100%; }

body {
  background: #fcfcfc;
  margin: 0;
}

.wrap {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  awidth: 100%;
  text-align: center;
}

Có hàng loạt các thuộc tính liên quan đến mask, như mask-position, mask-repeat, và mask-size, nó điều chỉnh các thuộc tính css. Bạn có thể dùng cách viết tắt mask nhưn với background:

.icon {
    background-color: red;
    -webkit-mask:  url(icon.svg) no-repeat 50% 50%;
    mask: url(icon.svg) no-repeat 50% 50%;
}

Masks được hỗ trợ ở hầu hết các trình duyệt.

http://status.modern.ie/masks http://caniuse.com/#feat=css-masks

Bạn có thể áp dụng Photoshop-like hiệu ứng tới DOM elements với CSS filters. Filters có thể bị trói buộc, với mỗi filter hoạt động trên các kết quả của trước đó.

<svg
    xmlns="http://www.w3.org/2000/svg"
    awidth="24"
    height="24"
    viewbox="0 0 24 24">
    <path fill="red" d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/>
</svg>

.icon-blue {
    -webkit-filter: hue-rotate(220deg) saturate(5);
    filter: hue-rotate(220deg) saturate(5);
}

Ở ví dụ này, icon có màu đỏ được đặt bằng SVG. hue-rotate filter xoay hue 220 độ quanh vòng màu sắc. Nó làm icon thành màu xanh. Thuật toán của hue-rotation không thật sự chính xác, nên màu sắc đưa ra là màu xanh cơ bản có thể bị khác biệt đi đôi chút. Một cách để sửa và đẩy màu mạnh lên là thêm một bộ lọc saturation. Trong ví dụ, Tôi thêm một giá trị tùy tiện lớn từ năm chữ số thành chuỗi, làm tăng độ bão hòa bởi 500%.

Bằng cách kết nối các bộ lọc với nhau, bạn có thể làm cho rất nhiều icon màu từ một đầu vào biểu tượng màu. Với sự kết hợp khác nhau của màu sắc xoay, Invert, độ sáng, độ bão hòa và các bộ lọc, tôi đã tạo ra quang phổ cầu vồng ROYGBIV và một số màu sắc cơ bản khác như xanh da trời và màu đỏ tươi.

<div class="wrap">

    <div class="icon icon-red"></div>
    <div class="icon icon-orange"></div>
    <div class="icon icon-yellow"></div>
    <div class="icon icon-green"></div>
    <div class="icon icon-blue"></div>
    <div class="icon icon-indigo"></div>
    <div class="icon icon-violet"></div><br/>

    <div class="icon icon-cyan"></div>
    <div class="icon icon-magenta"></div>
    <div class="icon icon-lime"></div>
    <div class="icon icon-olive"></div>
    <div class="icon icon-maroon"></div>
    <div class="icon icon-purple"></div><br/>

    <div class="icon icon-white"></div>
    <div class="icon icon-gray10"></div>
    <div class="icon icon-gray20"></div>
    <div class="icon icon-gray30"></div>
    <div class="icon icon-gray40"></div>
    <div class="icon icon-gray50"></div>
    <div class="icon icon-gray60"></div>
    <div class="icon icon-gray70"></div>
    <div class="icon icon-gray80"></div>
    <div class="icon icon-gray90"></div>
    <div class="icon icon-black"></div>

</div>

.icon {
  awidth: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  background-size: cover;
}

.icon-red {}

.icon-orange {
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

.icon-green{
  -webkit-filter: hue-rotate(120deg) saturate(1.5);
  filter: hue-rotate(120deg) saturate(1.5);
}

.icon-blue {
  -webkit-filter: hue-rotate(240deg) saturate(100);
  filter: hue-rotate(240deg) saturate(5);
}

.icon-indigo {
  -webkit-filter: hue-rotate(276deg) saturate(0.1) saturate(6.25) brightness(73%);
  filter: hue-rotate(276deg) saturate(0.1) saturate(6.25) brightness(73%)
}

.icon-violet {
  -webkit-filter: hue-rotate(260deg) saturate(100) saturate(.2) brightness(220%);
  filter: hue-rotate(260deg) saturate(100) saturate(.2) brightness(220%);
}

.icon-cyan {
  filter: invert(1);
  -webkit-filter: invert(1);
}

.icon-magenta {
  -webkit-filter: hue-rotate(260deg) saturate(100);
  filter: hue-rotate(260deg) saturate(100);

}

.icon-lime {
  -webkit-filter: hue-rotate(80deg) saturate(100);
  filter: hue-rotate(80deg) saturate(100);
}

.icon-olive {
  -webkit-filter: hue-rotate(35deg) saturate(.5) brightness(630%) saturate(100) brightness(50%);
  filter: hue-rotate(35deg) saturate(.5) brightness(630%) saturate(100) brightness(50%);
}

.icon-maroon {
  -webkit-filter: hue-rotate(35deg) saturate(.5) brightness(288%) saturate(100) brightness(50%);
  filter: hue-rotate(35deg) saturate(.5) brightness(288%) saturate(100) brightness(50%);
}

.icon-purple {
  filter: hue-rotate(300deg) saturate(.64);
  -webkit-filter: hue-rotate(300deg