Bu tekniği http://css-tricks.com/svg-fallbacks/ kullanmak ve svg rengini değiştirmek istiyorum ama şimdiye kadar yapamadım. Bunu css'e koydum ama ne olursa olsun imajım her zaman siyah. Kodum:

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

Görüntünün rengini bu şekilde değiştiremezsiniz. SVG'yi görüntü olarak yüklerseniz, tarayıcıda CSS veya Javascript kullanarak nasıl görüntüleneceğini değiştiremezsiniz.

Eğer SVG resmini değiştirmek istiyorsanız, bunu kullanarak yüklemek zorunda <object>, <iframe>ya da kullanan <svg>inline.

Sayfadaki teknikleri kullanmak istiyorsanız, SVG desteğini kontrol edebileceğiniz ve yedek bir görüntüyü koşullu olarak görüntüleyip görüntüleyemeyeceğiniz Modernizr kütüphanesine ihtiyacınız var. Daha sonra SVG'nizi satır içine alabilir ve ihtiyacınız olan stilleri uygulayabilirsiniz.

Görmek :

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

SVG'nizi satır içine alabilir, yedek resminizi bir sınıf adıyla etiketleyebilirsiniz ( 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" />

CSS'de SVG desteğini kontrol etmek için no-svgModernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) sınıfını kullanın . SVG desteği yoksa SVG bloğu yok sayılır ve görüntü görüntülenir, aksi takdirde görüntü DOM ağacından kaldırılır ( display: none):

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

Ardından, satır içi öğenizin rengini değiştirebilirsiniz:

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

2020 cevap

CSS Filtresi mevcut tüm tarayıcılarda çalışır

Herhangi bir SVG rengini değiştirmek için

1. Bir <img>etiket kullanarak SVG görüntüsünü ekleyin .

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

2. Belirli bir renge filtre uygulamak için, onaltılık renk kodunu bir CSS filtresine dönüştürmek için aşağıdaki Codepen'i (codepen'i açmak için Buraya Tıklayın) kullanın:

Örneğin #00EE00,

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

3. CSS'yi filterbu sınıfa ekleyin .

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

Herhangi bir SVG'nin rengini değiştirmek için , svg dosyasını herhangi bir metin düzenleyicisinde açarak doğrudan svg kodunu değiştirebilirsiniz . Kod aşağıdaki kod gibi görünebilir

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

Yol, daire, çokgen vb.Gibi bazı XML etiketlerinin olduğunu gözlemleyebilirsiniz . Orada stil niteliği yardımıyla kendi renginizi ekleyebilirsiniz . Aşağıdaki örneğe bakın

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

SVG'nizi istediğiniz renkten alabilmeniz için tüm etiketlere style özelliğini ekleyin

Filtre ayarları aracılığıyla SVG'yi renklendirmek için bir test sayfası eklendi:

ÖRNEĞİN filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

SVG'nizi Yükleyin ve Renklendirin - Jsfiddle

Bu fikri şuradan aldı: https://blog.union.io/code/2017/08/10/img-svg-fill/

Yalnızca yol bilgisine sahip SVG . bunu görüntüye yapamazsınız .. yol olarak kontur ve dolgu bilgilerini değiştirebilirsiniz ve işiniz bitti. Illustrator gibi

yani: CSS ile yol filldeğerinin üzerine yazabilirsiniz

path { fill: orange; }

ancak daha fazla gezinme efekti varken bir metinle değiştirmek istediğiniz gibi daha esnek bir yol istiyorsanız .. kullanın

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>

en kolay yol, https://icomoon.io/app/#/select gibi bir hizmeti kullanarak SVG'den bir yazı tipi oluşturmaktır . SVG'nizi yükleyin, "yazı tipi oluştur" u tıklayın, yazı tipi dosyalarını ve css'yi yanınıza ekleyin ve diğer metinler gibi kullanın ve stil verin. Her zaman böyle kullanıyorum çünkü stil yapmayı çok daha kolay hale getiriyor.

EDIT: @ CodeMouse92 simge yazı tipleri tarafından yorumlanan makalede belirtildiği gibi ekran okuyucular berbat (ve muhtemelen SEO için kötü). Bu yüzden SVG'lere sadık kalın.

Arka plan rengine sahip bir kutu öğesinde SVG maskesi şu şekilde sonuçlanır:

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

_{Not - SVG maskeleri Internet Explorer tarayıcılarında desteklenmez}

Bazı hileler kullanırsanız SVG renklerini css ile değiştirebilirsiniz. Bunun için küçük bir senaryo yazdım.

• svg resmi olan öğelerin bir listesini gözden geçirin
• svg dosyasını xml olarak yükle
• sadece svg bölümünü getir
• yolun rengini değiştir
• src'yi satır içi görüntü olarak değiştirilmiş svg ile değiştirin

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

});

Yukarıdaki kod düzgün çalışmıyor olabilir, neredeyse buna benzer çalışan bir svg arka plan görüntüsü olan öğeler için bunu uyguladım. Ama yine de bu komut dosyasını durumunuza uyacak şekilde değiştirmeniz gerekiyor. Umarım yardımcı olmuştur.

Svg içindeki yolu hedefleyin:

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

Satır içi yapabilirsiniz, örneğin:

<path fill="#ccc">

Veya

svg{
   path{
        fill: #ccc

SVG'nin rengini değiştirmek için:

Svg dosyasına ve stiller altında, dolgudaki renkten bahsedin.

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

Bunu bir satır içi svg'ye, örneğin css'nizde bir arka plan görüntüsüne yapmak istiyorsanız:

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

Tabii ki, ... satır içi görüntü kodunuzla değiştirin.

Örneğin, HTML'nizde:

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

JQuery kullanın:

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

Aslında, bu soruna çok daha esnek bir çözüm var: Çalışma zamanında SVG'yi metin olarak ekleyecek bir Web Bileşeni yazmak . Ayrıca yayınlanan özünden JSFiddle bir bağlantı ile

👍 filtre: ters çevir (% 42) sepya (% 93) doymuş (% 1352) renk döndürme (87 derece) parlaklık (% 119) kontrast (% 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>

En kısa Bootstrap uyumlu yol, JavaScript yok:

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

ve şöyle kullanın:

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

Bir tarayıcı kullanarak resminizi açın, görsele sağ tıklayın, sayfa görüntüleme kaynağını tıklayın ve resmin svg etiketini göreceksiniz. Kopyalayın ve HTML'nize yapıştırın, ardından dolguyu istediğiniz renge değiştirin

Görüntünün svg etiketine fill: "desiredColor" ifadesini eklemeniz yeterlidir: örnek:

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