it-swarm.com.de

Ändern Sie die SVG-Farbe

Ich möchte diese Technik verwenden http://css-tricks.com/svg-fallbacks/ und die svg-Farbe ändern, aber bisher konnte ich das nicht. Ich lege dies in die CSS, aber mein Bild ist immer schwarz, egal was passiert. Mein Code:

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

110
Barbara

Sie können die Farbe eines Bildes nicht auf diese Weise ändern. Wenn Sie SVG als Bild laden, können Sie nicht ändern, wie es mit CSS oder Javascript im Browser angezeigt wird.

Wenn Sie Ihr SVG-Bild ändern möchten, müssen Sie es mit <object>, <iframe> oder mit <svg> inline laden.

Wenn Sie die Techniken auf der Seite verwenden möchten, benötigen Sie die Modernizr-Bibliothek, in der Sie prüfen können, ob SVG-Unterstützung verfügbar ist und ob ein Fallback-Bild angezeigt wird oder nicht. Sie können dann Ihre SVG-Datei einbetten und die gewünschten Styles anwenden.

Sehen :

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

Sie können Ihre SVG-Datei inline einbetten und Ihr Fallback-Image mit einem Klassennamen (my-svg-alternate) kennzeichnen:

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

Und in CSS verwenden Sie die no-svg-Klasse von Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ), um nach SVG-Unterstützung zu suchen. Wenn keine SVG-Unterstützung vorhanden ist, wird der SVG-Block ignoriert und das Bild wird angezeigt. Andernfalls wird das Bild aus der DOM-Baumstruktur (display: none) entfernt:

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

Dann können Sie die Farbe Ihres eingebetteten Elements ändern:

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

Um die Farbe einer SVG-Datei zu ändern, können Sie den SVG-Code direkt ändern, indem Sie die SVG-Datei in einem Texteditor öffnen . Der Code kann wie der folgende Code aussehen 

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

Sie können beobachten, dass es einige XML-Tags gibt, wie Pfad, Kreis, Polygon usw. . Dort können Sie mit style attribute Ihre eigene Farbe hinzufügen. Schauen Sie sich das Beispiel unten an

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

Fügen Sie allen Tags das style-Attribut hinzu, damit Sie Ihre SVG-Farbe in der gewünschten Farbe erhalten

120
sushant047

Schritte, die ich befolge, um die Farbe eines SVG zu ändern:

  • Fügen Sie zunächst ein SVG-Bild mit den Tags img hinzu
 <img src="dotted-arrow.svg" class="filter-green"/>

Die Ausgabe für # 00EE00 lautet beispielsweise 

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  • Erstellen Sie eine neue Klasse und fügen Sie diesen Filter in diese Klasse ein.
.filter-green{
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
  • Jetzt fügen Sie diese Klasse zum Image-Tag hinzu, und die Farbe von SVG wird in HEX geändert, das von uns bereitgestellt wird.
28
Manish Menaria

Eine Testseite wurde hinzugefügt - um SVG über die Filtereinstellungen einzufärben:

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

Lade deine SVG-Jsfiddle hoch und male sie aus

Hat die Idee übernommen von: https://blog.union.io/code/2017/08/10/img-svg-fill/

25
Yonatan Ayalon

der einfachste Weg wäre, eine Schriftart aus der SVG-Datei mit einem Dienst wie https://icomoon.io/app/#/select oder ähnlichem zu erstellen. Laden Sie Ihre SVG-Datei hoch, klicken Sie auf "Generate Font" (Font generieren), fügen Sie Font-Dateien und CSS in Ihre Seite ein und verwenden Sie sie wie jeden anderen Text. Ich verwende es immer so, weil es das Styling viel einfacher macht.

EDIT: Wie bereits im article kommentiert von @ CodeMouse92-Icon-Fonts wird der Screenreader durcheinander gebracht (und sind möglicherweise schlecht für SEO). Also bleib lieber bei den SVGs.

7
Felix Hagspiel

Nur SVG mit Pfadinformationen . Sie können das nicht mit dem Bild machen. Als Pfad können Sie Strock- und Fill-Informationen ändern, und Sie sind fertig. wie Illustrator

also: über CSS können Sie den Pfad fill value überschreiben

path { fill: orange; }

wenn Sie jedoch einen flexibleren Weg wünschen, da Sie ihn mit einem Text ändern möchten, während Sie einen Schwebeflug haben, verwenden Sie 

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>

5

Sie können die SVG-Färbung mit css ändern, wenn Sie einige Tricks verwenden ... Ich habe dafür ein kleines Skript geschrieben. 

  • gehen Sie eine Liste der Elemente durch, die ein SVG-Bild enthalten
  • laden Sie die SVG-Datei als XML
  • nur SVG-Teil abrufen
  • pfadfarbe ändern
  • ersetzen Sie src durch das modifizierte svg als 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')));
  });

});

der obige code funktioniert möglicherweise nicht richtig, ich habe dies für elemente mit einem svg-hintergrundbild implementiert, das fast so funktioniert wie dies .. __ Sie müssen dieses Skript jedoch an Ihren Fall anpassen. hoffe es hat geholfen.

4
cydoc

So ändern Sie einfach die Farbe der SVG:

Gehen Sie zur svg-Datei und geben Sie unter Stile die Farbe in der Füllung an.

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

SVG Maske auf einem Feldelement mit einer Hintergrundfarbe ergibt:

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

.icon-bike{
  background: black;
  -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
}

.icon-bike:hover{
  background: green;
}
<i class="icon icon-bike" style="--size:150px"></i>
1
vsync

Wenn Sie dies mit einer Inline-Svg tun möchten, die beispielsweise ein Hintergrundbild in Ihrem CSS ist:

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

natürlich ersetzen Sie ... durch Ihren Inline-Bildcode

1
Vision Hive

Zum Beispiel:

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

Verwenden Sie jQuery:

$ ("# struct1"). css ("fill", "");

0
Grv97

Richten Sie den Pfad innerhalb der SVG aus:

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

Sie können Inline machen, wie:

<path fill="#ccc">

Oder

svg{
   path{
        fill: #ccc
0
Michael Philips