Tôi muốn sử dụng kỹ thuật này http://css-tricks.com/svg-fallbacks/ và thay đổi màu sắc của Svg nhưng cho đến nay tôi vẫn chưa thể làm được. Tôi đặt cái này trong css nhưng hình ảnh của tôi luôn đen, không có vấn đề gì. Mã của tôi:

.change-my-color {
  fill: green;
}

<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

Bạn không thể thay đổi màu sắc của hình ảnh theo cách đó. Nếu bạn tải SVG dưới dạng hình ảnh, bạn không thể thay đổi cách hiển thị bằng CSS hoặc Javascript trong trình duyệt.

Nếu bạn muốn thay đổi hình ảnh SVG của bạn, bạn phải tải nó sử dụng <object>, <iframe>hoặc sử dụng <svg>inline.

Nếu bạn muốn sử dụng các kỹ thuật trong trang, bạn cần thư viện Modernizr, nơi bạn có thể kiểm tra hỗ trợ SVG và hiển thị có điều kiện hoặc không hiển thị hình ảnh dự phòng. Sau đó, bạn có thể nội tuyến SVG của bạn và áp dụng các phong cách bạn cần.

Xem :

#time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
	C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
	C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
	c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
	c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

Bạn có thể nội tuyến SVG của bạn, gắn thẻ hình ảnh dự phòng của bạn với một tên lớp ( my-svg-alternate):

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

Và trong CSS, sử dụng no-svglớp từ Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) để kiểm tra hỗ trợ SVG. Nếu không có hỗ trợ SVG, khối SVG sẽ bị bỏ qua và hình ảnh sẽ được hiển thị, nếu không hình ảnh sẽ bị xóa khỏi cây DOM ( display: none):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

Sau đó, bạn có thể thay đổi màu của phần tử nội tuyến của bạn:

#time-3-icon {
   fill: green;
}

2020 trả lời

Bộ lọc CSS hoạt động trên tất cả các trình duyệt hiện tại

Để thay đổi bất kỳ màu SVG nào

1. Thêm hình ảnh SVG bằng cách sử dụng một <img>thẻ.

<img src="dotted-arrow.svg" class="filter-green"/>

2. Để lọc thành một màu cụ thể, hãy sử dụng Codepen sau (Bấm vào đây để mở codepen) để chuyển đổi mã màu hex thành bộ lọc CSS:

Ví dụ: đầu ra cho #00EE00là

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

3. Thêm CSS filtervào lớp này.

    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

Để thay đổi màu của bất kỳ SVG nào, bạn có thể trực tiếp thay đổi mã svg bằng cách mở tệp svg trong bất kỳ trình soạn thảo văn bản nào . Mã có thể trông giống như mã dưới đây

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

Bạn có thể quan sát rằng có một số thẻ XML như đường, hình tròn, đa giác vv . Ở đó bạn có thể thêm màu của riêng bạn với sự trợ giúp của thuộc tính style . Nhìn vào ví dụ dưới đây

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Thêm thuộc tính kiểu cho tất cả các thẻ để bạn có thể nhận được SVG của màu bạn yêu cầu

Đã thêm một trang thử nghiệm - để tô màu SVG thông qua cài đặt Bộ lọc:

VÍ DỤ filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Tải lên & tô màu SVG của bạn - Jsfiddle

Lấy ý tưởng từ: https://blog.union.io/code/2017/08/10/img-svg-fill/

Chỉ có SVG với thông tin đường dẫn . bạn không thể làm điều đó với hình ảnh .. vì đường dẫn bạn có thể thay đổi đột quỵ và điền thông tin và bạn đã hoàn thành. như Illustrator

vì vậy: thông qua CSS, bạn có thể ghi đè fillgiá trị đường dẫn

path { fill: orange; }

nhưng nếu bạn muốn cách linh hoạt hơn khi bạn muốn thay đổi nó bằng một văn bản khi có một số hiệu ứng lơ lửng đang diễn ra .. hãy sử dụng

path { fill: currentcolor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}

<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>

cách dễ nhất là tạo một phông chữ ra khỏi SVG bằng cách sử dụng một dịch vụ như https://icomoon.io/app/#/select hoặc như vậy. tải lên SVG của bạn, nhấp vào "tạo phông chữ", bao gồm các tệp phông chữ và css vào bên cạnh của bạn và chỉ cần sử dụng và định kiểu nó như bất kỳ văn bản nào khác. Tôi luôn sử dụng nó như thế này vì nó làm cho kiểu dáng dễ dàng hơn nhiều.

EDIT: Như đã đề cập trong bài viết được bình luận bởi phông chữ biểu tượng @ CodeMouse92 làm rối trình đọc màn hình (và có thể xấu cho SEO). Vì vậy, thay vì gắn bó với các SVG.

Bạn có thể thay đổi màu SVG bằng css nếu bạn sử dụng một số thủ thuật. Tôi đã viết một kịch bản nhỏ cho điều đó.

• đi qua một danh sách các yếu tố có hình ảnh svg
• tải tập tin svg dưới dạng xml
• chỉ lấy phần của Svg
• thay đổi màu sắc của con đường
• thay thế src bằng svg đã sửa đổi thành hình ảnh nội tuyến

$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

đoạn mã trên có thể không hoạt động chính xác, tôi đã triển khai mã này cho các phần tử có ảnh nền svg hoạt động gần giống với mã này. Nhưng dù sao bạn cũng phải sửa đổi tập lệnh này để phù hợp với trường hợp của bạn. hy vọng nó sẽ giúp

Mặt nạ SVG trên thành phần hộp có màu nền sẽ cho kết quả:

.icon{
  --size     : 70px;
  display    : inline-block;
  width      : var(--size);
  height     : var(--size);
  transition : .12s;
  -webkit-mask-size: cover;
  mask-size  : cover;
}

.icon-bike{
  background: black;
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(hhttps://image.flaticon.com/icons/svg/89/89139.svg);
  animation: 1s frames infinite ease;
}

@keyframes frames {
  50% { background:red;  }
}

<i class="icon icon-bike" style="--size:150px"></i>

_{Lưu ý - Mặt nạ SVG không được hỗ trợ trong trình duyệt Internet Explorer}

Nhắm mục tiêu đường dẫn trong svg:

<svg>
   <path>....
</svg>

Bạn có thể thực hiện nội tuyến, như:

<path fill="#ccc">

Hoặc là

svg{
   path{
        fill: #ccc

Để chỉ đơn giản là thay đổi màu sắc của svg:

Đi đến tập tin svg và theo phong cách, đề cập đến màu sắc điền vào.

<style>.cls-1{fill:#FFFFFF;}</style>

Nếu bạn muốn làm điều này với một Svg nội tuyến, ví dụ, một hình nền trong css của bạn:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

tất nhiên, thay thế ... bằng mã hình ảnh nội tuyến của bạn

Ví dụ: trong HTML của bạn:

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

Sử dụng jQuery:

$("#struct1").css("fill","<desired colour>");

Trên thực tế, có một giải pháp khá linh hoạt hơn cho vấn đề này: viết một Thành phần Web sẽ vá SVG dưới dạng văn bản trong thời gian chạy. Cũng được xuất bản trong ý chính với một liên kết đến JSFiddle

👍 bộ lọc: đảo ngược (42%) nâu đỏ (93%) bão hòa (1352%) độ sáng màu xoay (87deg) (119%) độ tương phản (119%);

<html>

<head>
  <title>SVG with color</title>
</head>

<body>
  <script>
    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);

      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }

      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);

      document.body.innerHTML += `<svg-with-color
        color='magenta' 
      ></svg-with-color>`;

    })();

  </script>
</body>

</html>

Cách tương thích Bootstrap ngắn nhất, không có JavaScript:

.cameraicon {
height: 1.6em;/* set your own icon size */
mask: url(/camera.svg); /* path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}

và sử dụng nó như:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>

Mở hình ảnh của bạn bằng trình duyệt, nhấp chuột phải vào hình ảnh nhấp vào nguồn trang xem và bạn sẽ thấy thẻ svg của hình ảnh. Đối phó và dán vào html của bạn, sau đó thay đổi màu tô thành màu bạn chọn

Đơn giản chỉ cần thêm điền: "wishColor" trong thẻ svg của hình ảnh: ví dụ:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>