img src SVG schimbarea cu stiluri CSS

Daca scopul tau este doar de a schimba culoarea din logo-ul, și tu nu't TREBUIE neapărat să utilizați CSS, apoi don't de a folosi javascript sau jquery cum a fost sugerat de către unele răspunsurile precedente.

Pentru a răspunde exact la întrebarea inițială, doar:

1. Deschide-logo-ul.svg într-un editor de text.

2. uita-te pentru umplere: #fffși înlocuiți-l cu umplere: #000

De exemplu, logo-ul.svg` ar putea arata astfel atunci când este deschis într-un editor de text:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

... doar schimba umple și de a salva.

Ai putea seta svg ca o masca. Așa stabilirea unui background-color ar acționa ca culoarea de umplere.

HTML

<div class="logo"></div>

CSS

.logo {
    background-color: red;
    -webkit-mask: url(logo.svg) no-repeat center;
    mask: url(logo.svg) no-repeat center;
}

JSFiddle: [https://jsfiddle.net/KuhlTime/2j8exgcb/][1]

Vă rugăm să rețineți că această metodă nu este de lucru pentru browser-ul Edge. Puteți verifica acest lucru prin a merge la acest site: https://caniuse.com/#search=mask

Încercați pur CSS:

.logo-img {
  // to black
  filter: invert(1);
  // or to blue
  // filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}

mai multe informații în acest articol https://blog.union.io/code/2017/08/10/img-svg-fill/

2018: Dacă doriți o culoare dinamică, nu doriți să utilizați javascript și nu doriți o linie SVG, utilizați un CSS variabilă. Funcționează în Chrome, Firefox și Safari. edit: si Edge

<svg>

</svg>

În SVG, înlocuiți orice cazuri de style="completa: #000" " cu " style="completa: var(--color_fill)".

Răspunsul de la @Praveen este solid.

Nu puteam't ajunge să răspundă în munca mea, așa că am făcut un jquery hover funcție pentru ea.

CSS

.svg path {
   transition:0.3s all !important;
}

JS / JQuery

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});

Acest răspuns se bazează pe răspunsul https://stackoverflow.com/a/24933495/3890888 dar, cu un simplu JavaScript versiune de script-ul folosit.

Aveți nevoie pentru a face SVG să fie un inline SVG. Puteți face uz de acest script, prin adăugarea unei clase svg a imaginii:

/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

Și apoi, dacă faci:

.logo-img path {
  fill: #000;
}

Sau poate fi:

.logo-img path {
  background-color: #000;
}

JSFiddle: http://jsfiddle.net/erxu0dzz/1/

Va trebui mai întâi pentru a injecta SVG în HTML DOM.

Acolo este o bibliotecă open source, numit SVGInject că face acest lucru pentru tine. Se folosește onload` atribut pentru a declanșa injecție.

Aici este un minim exemplu, folosind SVGInject:

    <script src="svg-inject.min.js"></script>

După ce imaginea este încărcat onload="SVGInject(aceasta) va declanșa injecție și element va fi înlocuit de conținutul din fișierul SVG prevăzut în src atribut.

Se rezolvă mai multe probleme cu SVG injecție:

1. Svg s pot fi ascunse până când injectarea s-a terminat. Acest lucru este important dacă un stil este aplicat deja în timpul de încărcare, care altfel ar cauza un scurt "unstyled conținut flash".

2. De <img> elemente injecta automat. Dacă adăugați svg s dinamic, nu't trebuie să vă faceți griji despre asteptare injecție funcționeze din nou.

3. Un șir aleator este adăugat la fiecare ID in SVG, pentru a evita având același ID de mai multe ori în document dacă o SVG este injectat mai mult de o dată.

SVGInject este simplu Javascript și funcționează cu toate browserele care acceptă SVG.

Disclaimer: eu sunt co-autor al SVGInject

De ce nu a crea un webfont cu svg imagine sau imagini, import webfont în css și apoi doar schimba culoarea simbol folosind css atribut de culoare? Nu javascript necesare

Pentru a extinde pe @gringo răspuns, Javascript metoda descrisă în alte răspunsuri funcționează, dar necesită utilizatorul pentru a descărca inutile fișiere imagine, și OMI, se umflă, cod.

Cred că o abordare mai bună ar fi pentru a migra toate 1-culoare grafică vectorială pentru un webfont fișier. Am'am folosit Fort Minunat în trecut, și it works mare pentru a combina icoane personalizate/imagini în format SVG, împreună cu orice icoane 3rd party pot fi utilizați (Font Minunat, Bootstrap icoane, etc.) într-un singur webfont fișier utilizatorul trebuie să descărcați. Puteți personaliza, de asemenea,, așa că include numai icoane 3rd party te're folosind. Acest lucru reduce numărul de cereri pe pagina sa de a face, și te're de ansamblu pagina de greutate, mai ales daca're deja inclusiv icoane 3rd party biblioteci.

Dacă preferați o mai dev orientate opțiune, ai putea Google "npm svg webfont", și de a folosi una dintre nodul module care's cel mai adecvat pentru mediul dumneavoastră.

După ce, ai'am făcut oricare dintre aceste două opțiuni, atunci ai putea schimba cu ușurință culoarea prin CSS, și cel mai probabil,'am accelerat site-ului dvs. în proces.

Dacă sunteți doar la schimbarea imaginii între real color și alb-negru, puteți seta un selector fi:

{filtru:none;}

și un alt ca:

{filter:grayscale(100%);}

Deoarece SVG este de fapt codul, ai nevoie doar de continut. Am folosit PHP pentru a obține conținut, dar puteți folosi orice vrei.

<?php
$content    = file_get_contents($pathToSVG);
?>

Apoi, am'am tipărit conținutul "ca este" în interiorul unui container div

<div class="fill-class"><?php echo $content;?></div>

Pentru a finnaly set de reguli container's SVG childs pe CSS

.fill-class > svg { 
    fill: orange;
}

Am primit acest rezultat cu un material SVG icon:

Mozilla Firefox 59.0.2 (64-bit) Linux

Google Chrome66.0.3359.181 (Build oficial) (64 de biți) Linux

Opera 53.0.2907.37 Linux

Principala problema in cazul tau este ca esti importul svg dintr-o <img> tag-ul, care va ascunde SVG structura.

Ai nevoie de a utiliza <svg> tag în legătură cupentru a obține efectul dorit. Pentru a face să funcționeze, aveți nevoie pentru a da un " id " de la calea pe care doriți să le utilizați în fișierul SVGpentru a putea apoi să le recupereze de la tag. Încercați indepartate de mai jos.

.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  transition: .5s;
  fill: currentColor;
  stroke-width: 5;
  }
  .icon:hover {
    fill: rgba(255,255,255,0);
    stroke: black;
    stroke-width: 2;
    }

.red {
  color: red;
  }

.blue {
  color: blue;
  }

<svg width="0" height="0">

    <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/>
</svg>

  <span class="icon red">
          <svg viewbox="0 0 100 100">

          </svg>
        </span>

    <span class="icon blue">
          <svg viewbox="0 0 100 100">

          </svg>
        </span>

Rețineți că puteți pune orice URL-ul înainte de a fragment # dacă doriți să încărcați SVG de la o sursă externă]1 (și nu de a o încorpora în HTML). De asemenea, de obicei, nu specificați umple în CSS. L's mai bine să ia în considerare utilizarea de completare:"currentColor", în SVG sine. Elementul corespunzător's de culoare CSS valoare va fi apoi folosit în loc.

Știu asta este o întrebare veche, dar recent am dat peste aceeași problemă și am rezolvat-o de la partea de server. Acesta este un php specifice de răspuns, dar sunt sigur că alte envs au ceva similar. în loc de a folosi tag-ul img-ai face svg ca svg de la get-du-te.

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

acum, când face fișierul, veți obține complet inline svg

Acest lucru ar putea fi util pentru persoanele care folosesc "PHP", în combinație cu .svg imagini care vor să manipuleze cu CSS.

Puteți't suprascrie proprietăți în interiorul unui tag-ul img cu CSS. Dar când svg codul sursă este încorporat în HTML cu siguranta pot. Îmi place pentru a rezolva această problemă cu o require_once funcție în cazul în care nu includ `.svg.php dosarul lui. L's place să importați o imagine, dar încă mai pot suprascrie stilurile cu CSS!

Prima include fișierul svg:

<?php require_once( '/assets/images/my-icon.svg.php' ); ?>

Și include această pictogramă de exemplu:

<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></svg>

Acum putem schimba cu ușurință culoarea de umplere ca asta cu CSS:

svg path {
  fill: blue;
}

Am încercat în primul rând pentru a rezolva această problemă cu file_get_contents ()`, dar solutia de mai sus este mult mai rapid.

Simplu..

Puteți utiliza acest cod:

<svg class="logo">

</svg>

Prima specificați calea de svg și apoi scrie-l's de IDENTITATE, În acest caz "Capa_1". Puteți obține ID-ul de svg, deschizându-l în orice editor.

În css:

.logo {
  fill: red;
}

Dacă aveți acces la JQuery, apoi se extinde la Praveen's răspunsul se poate programatic schimbare de culoare de diferite elemente imbricate în interiorul SVG prin:

$('svg').găsi('cale, text').css('umple', '#ffffff');

În cadrul găsi, puteți menționa diferite elemente care trebuie să fie schimbat la culoare.