Saya ingin menggunakan teknik ini http://css-tricks.com/svg-fallbacks/ dan mengubah warna svg tapi sejauh ini saya belum bisa melakukannya. Saya meletakkan ini di css tetapi gambar saya selalu hitam, tidak peduli apa. Kode saya:

.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>

Anda tidak dapat mengubah warna gambar seperti itu. Jika Anda memuat SVG sebagai gambar, Anda tidak bisa mengubah cara ditampilkan menggunakan CSS atau Javascript di browser.

Jika Anda ingin mengubah gambar SVG Anda, Anda harus memuatnya menggunakan <object>, <iframe>atau menggunakan <svg>inline.

Jika Anda ingin menggunakan teknik di halaman, Anda memerlukan pustaka Modernizr, di mana Anda dapat memeriksa dukungan SVG dan menampilkan secara kondisional atau tidak gambar fallback. Anda kemudian dapat sebaris SVG Anda dan menerapkan gaya yang Anda butuhkan.

Lihat :

#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" />

Anda dapat menyejajarkan SVG Anda, menandai gambar mundur Anda dengan nama kelas ( 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" />

Dan dalam CSS gunakan no-svgkelas dari Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) untuk memeriksa dukungan SVG. Jika tidak ada dukungan SVG, blok SVG akan diabaikan dan gambar akan ditampilkan, jika tidak gambar akan dihapus dari pohon DOM ( display: none):

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

Kemudian Anda dapat mengubah warna elemen inline Anda:

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

Jawaban 2020

Filter CSS berfungsi pada semua browser saat ini

Untuk mengubah warna SVG

1. Tambahkan gambar SVG menggunakan <img>tag.

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

2. Untuk memfilter ke warna tertentu, gunakan Codepen berikut (Klik Di Sini untuk membuka codepen) untuk mengonversi kode warna hex ke filter CSS:

Misalnya, output untuk #00EE00is

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

3. Tambahkan CSS filterke dalam kelas ini.

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

Untuk mengubah warna SVG apa pun, Anda dapat langsung mengubah kode svg dengan membuka file svg di editor teks apa pun . Kode tersebut mungkin terlihat seperti kode di bawah ini

<?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>

Anda dapat mengamati bahwa ada beberapa tag XML seperti jalur, lingkaran, poligon dll . Di sana Anda dapat menambahkan warna Anda sendiri dengan bantuan atribut gaya . Lihatlah contoh di bawah ini

<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"/>

Tambahkan atribut style ke semua tag sehingga Anda bisa mendapatkan SVG dari warna yang Anda butuhkan

Menambahkan halaman uji - untuk mewarnai SVG melalui pengaturan Filter:

MISALNYA filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Unggah & Warna SVG - Jsfiddle Anda

Mengambil ide dari: https://blog.union.io/code/2017/08/10/img-svg-fill/

Hanya SVG dengan informasi jalur . Anda tidak dapat melakukan itu pada gambar .. sebagai jalur Anda dapat mengubah goresan dan mengisi informasi dan Anda selesai. seperti Illustrator

jadi: melalui CSS Anda dapat menimpa fillnilai jalur

path { fill: orange; }

tetapi jika Anda ingin cara yang lebih fleksibel karena Anda ingin mengubahnya dengan teks ketika memiliki beberapa efek melayang terjadi .. gunakan

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>

cara termudah adalah membuat font dari SVG menggunakan layanan seperti https://icomoon.io/app/#/select atau semacamnya. unggah SVG Anda, klik "menghasilkan font", sertakan file font dan css ke sisi Anda dan cukup gunakan dan gaya itu seperti teks lainnya. Saya selalu menggunakannya seperti ini karena itu membuat styling jauh lebih mudah.

SUNTING: Seperti yang disebutkan dalam artikel yang dikomentari oleh ikon font @ CodeMouse92 mengacaukan pembaca layar (dan mungkin buruk untuk SEO). Jadi lebih tepatnya berpegang pada SVG.

Topeng SVG pada elemen kotak dengan warna latar akan menghasilkan:

.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>

_{Catatan - Topeng SVG tidak didukung di browser Internet Explorer}

Anda dapat mengubah pewarnaan SVG dengan css jika Anda menggunakan beberapa trik. Saya menulis naskah kecil untuk itu.

• buka daftar elemen yang memiliki gambar svg
• memuat file svg sebagai xml
• hanya ambil bagian svg
• ubah warna jalur
• ganti src dengan svg yang dimodifikasi sebagai inline image

$('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')));
  });

});

kode di atas mungkin tidak berfungsi dengan benar, saya sudah menerapkan ini untuk elemen dengan gambar latar belakang svg yang bekerja hampir mirip dengan ini. Tapi bagaimanapun Anda harus memodifikasi skrip ini agar sesuai dengan kasus Anda. Semoga ini bisa membantu.

Targetkan jalur di dalam svg:

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

Anda dapat melakukan inline, seperti:

<path fill="#ccc">

Atau

svg{
   path{
        fill: #ccc

Untuk hanya mengubah warna svg:

Pergi ke file svg dan di bawah gaya, sebutkan warna dalam isian.

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

Jika Anda ingin melakukan ini pada svg inline yang, misalnya, gambar latar belakang di css Anda:

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");

tentu saja, ganti ... dengan kode gambar sebaris Anda

Misalnya, dalam HTML Anda:

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

Gunakan jQuery:

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

Sebenarnya, ada solusi yang lebih fleksibel untuk masalah ini: menulis Komponen Web yang akan menambal SVG sebagai teks dalam runtime. Juga diterbitkan di intisari dengan tautan ke JSFiddle

👍 filter: membalikkan (42%) sepia (93%) saturate (1352%) kecerahan rona (87deg) kecerahan (119%) kontras (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>

Cara yang kompatibel dengan Bootstrap terpendek, tanpa 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;
}

dan gunakan seperti:

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

Buka gambar Anda menggunakan browser, klik kanan pada gambar klik pada sumber halaman lihat dan Anda akan melihat tag svg gambar. Atasi dan rekatkan ke html Anda, lalu ubah isi sesuai warna pilihan Anda

Cukup tambahkan isi: "warna yang diinginkan" di tag svg gambar: contoh:

<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>