Wie ändert man die Farbe eines SVG-Bildes mit CSS (jQuery SVG-Bildersatz)?

Question

Wie ändert man die Farbe eines SVG-Bildes mit CSS (jQuery SVG-Bildersatz)?

Gefragt el 16 de August, 2012: Wann wurde die Frage gestellt
758817 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Dies ist eine Selbstbefragung zu einem praktischen Code, den ich mir ausgedacht habe.

Derzeit gibt es keine einfache Möglichkeit, ein SVG-Bild einzubetten und dann per CSS auf die SVG-Elemente zuzugreifen. Es gibt verschiedene Methoden zur Verwendung von JS-SVG-Frameworks, aber sie sind übermäßig kompliziert, wenn Sie nur ein einfaches Symbol mit einem Rollover-Status erstellen wollen.

Ich habe mir also folgendes ausgedacht, das meiner Meinung nach die bei weitem einfachste Möglichkeit ist, SVG-Dateien auf einer Website zu verwenden. Das Konzept stammt von den frühen Text-zu-Bild-Ersetzungsmethoden, aber soweit ich weiß, wurde es noch nie für SVGs verwendet.

Das ist die Frage:

Wie kann ich ein SVG einbetten und seine Farbe in CSS ändern, ohne ein JS-SVG-Framework zu verwenden?

Gefragt el 16 de August, 2012 von Drew Baker

Answer 1

5 Antworten

Answer 2

6voto

Waruyama Punkte 2979

Es gibt eine Open-Source-Bibliothek namens SVGInject, die die onload Attribut, um die Injektion auszulösen. Sie finden das GitHub-Projekt unter https://github.com/iconfu/svg-inject

Hier ist ein minimales Beispiel mit SVGInject:

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

Nachdem das Bild geladen ist, wird die onload="SVGInject(this) löst die Injektion aus und die <img> Element wird durch den Inhalt der SVG-Datei ersetzt, die in der src Attribut.

Es löst mehrere Probleme mit SVG-Injektion:

SVGs können ausgeblendet werden, bis die Injektion abgeschlossen ist. Dies ist wichtig, wenn bereits während des Ladevorgangs ein Stil angewendet wird, der sonst ein kurzes "Aufblitzen des ungestylten Inhalts" verursachen würde.
Le <img> Elemente injizieren sich automatisch. Wenn Sie SVGs dynamisch hinzufügen, müssen Sie sich nicht darum kümmern, die Injektionsfunktion erneut aufzurufen.
Zu jeder ID in der SVG wird eine zufällige Zeichenkette hinzugefügt, um zu vermeiden, dass dieselbe ID mehrmals im Dokument vorkommt, wenn eine SVG mehr als einmal injiziert wird.

SVGInject ist einfaches Javascript und funktioniert mit allen Browsern, die SVG unterstützen.

Haftungsausschluss: Ich bin der Co-Autor von SVGInject

Beantwortet el 4 de September, 2018 von Waruyama (2979 Punkte )

Answer 3

4voto

user3144480 Punkte 343

Hier ist ein Code ohne Framework, nur reine js :

document.querySelectorAll('img.svg').forEach(function(element) {
            var imgID = element.getAttribute('id')
            var imgClass = element.getAttribute('class')
            var imgURL = element.getAttribute('src')

            xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var svg = xhr.responseXML.getElementsByTagName('svg')[0];

                    if(imgID != null) {
                         svg.setAttribute('id', imgID);
                    }

                    if(imgClass != null) {
                         svg.setAttribute('class', imgClass + ' replaced-svg');
                    }

                    svg.removeAttribute('xmlns:a')

                    if(!svg.hasAttribute('viewBox') && svg.hasAttribute('height') && svg.hasAttribute('width')) {
                        svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
                    }
                    element.parentElement.replaceChild(svg, element)
                }
            }
            xhr.open('GET', imgURL, true)
            xhr.send(null)
        })

Beantwortet el 7 de November, 2017 von user3144480 (343 Punkte )

Answer 4

3voto

Abhishek Borar Punkte 119

Wenn wir eine größere Anzahl solcher svg-Bilder haben, können wir auch die Hilfe von Schriftdateien in Anspruch nehmen.
Websites wie https://glyphter.com/ kann uns eine Schriftartdatei aus unseren svgs holen.

z.B.

@font-face {
    font-family: 'iconFont';
    src: url('iconFont.eot');
}
#target{
    color: white;
    font-size:96px;
    font-family:iconFont;
}

Beantwortet el 7 de Juli, 2015 von Abhishek Borar (119 Punkte )

Answer 5

3voto

Benjamin Punkte 558

Da SVG im Grunde Code ist, brauchen Sie nur Inhalte. Ich habe PHP verwendet, um Inhalte zu erhalten, aber Sie können verwenden, was Sie wollen.

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

Dann habe ich den Inhalt "wie er ist" innerhalb eines div-Containers gedruckt

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

So legen Sie die Regel für die SVG-Unterobjekte des Containers auf CSS fest

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

Ich habe diese Ergebnisse mit einem Materialsymbol-SVG erhalten:

Mozilla Firefox 59.0.2 (64-bit) Linux

Google Chrome66.0.3359.181 (Build oficial) (64 bits) Linux

Opera 53.0.2907.37 Linux

Beantwortet el 6 de Juni, 2018 von Benjamin (558 Punkte )

Answer 6

2voto

patelarpan Punkte 6468

Sie können dafür data-image verwenden. Mit data-image(data-URI) können Sie auf SVG wie auf Inline zugreifen.

Hier ein Rollover-Effekt mit reinem CSS und SVG.

Ich weiß es chaotisch aber Sie können es so machen.

 .action-btn {
    background-size: 20px 20px;
    background-position: center center;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-radius: 30px;
    height: 40px;
    width: 60px;
    display: inline-block;
 }

.delete {
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#FB404B' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px' viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z'/%3e%3cpath d='M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
     border-color:#FB404B;

 }

 .delete:hover {
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#fff' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px' viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z'/%3e%3cpath d='M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");        
     background-color: #FB404B;
    }

<a class="action-btn delete">&nbsp;</a>

Hier können Sie Ihr svg in eine Datenurl umwandeln

Beantwortet el 7 de Kann, 2018 von patelarpan (6468 Punkte )

Wie ändert man die Farbe eines SVG-Bildes mit CSS (jQuery SVG-Bildersatz)?

Wie kann ich ein SVG einbetten und seine Farbe in CSS ändern, ohne ein JS-SVG-Framework zu verwenden?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie ändert man die Farbe eines SVG-Bildes mit CSS (jQuery SVG-Bildersatz)?

Wie kann ich ein SVG einbetten und seine Farbe in CSS ändern, ohne ein JS-SVG-Framework zu verwenden?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: