it-swarm.com.de

Wie stelle ich SVG mit externem CSS ein?

Ich habe mehrere SVG-Grafiken, deren Farben ich über meine externen Stylesheets ändern möchte - nicht direkt in jeder SVG-Datei. Ich setze die Grafiken nicht inline, sondern speichere sie in meinem Bilderordner und zeige auf sie.

Ich habe sie auf diese Weise implementiert, damit Tooltips funktionieren können, und ich habe jedes mit einem <a>-Tag versehen, um einen Link zuzulassen.

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

Und hier ist der Code der SVG-Grafik:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!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" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

Ich füge folgendes in meine externe CSS-Datei (main.css) ein:

.socIcon g {fill:red;}

Es hat jedoch keine Auswirkungen auf die Grafik. Ich habe auch versucht .socIcon g path {} und .socIcon path {}.

Etwas stimmt nicht, vielleicht erlaubt meine Implementierung keine externen CSS-Änderungen oder ich habe einen Schritt verpasst? Ich würde mich sehr über Ihre Hilfe freuen! Ich brauche nur die Möglichkeit, die Farben der SVG-Grafik über mein externes Stylesheet zu ändern, aber ich kann die Tooltip- und Link-Fähigkeit nicht verlieren. (Ich kann allerdings auch ohne Tooltips leben.) Danke!

70
Jordan H

Ihre main.css-Datei hat nur eine Auswirkung auf den Inhalt der SVG-Datei, wenn die SVG-Datei inline in den HTML-Code eingefügt wird:

https://developer.mozilla.org/de/docs/SVG_In_HTML_Einführung

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......./>
    </g>
  </svg>
</html>

Wenn Sie Ihre SVG-Dateien in Dateien behalten möchten, muss das CSS in der SVG-Datei definiert werden. 

Sie können es mit einem Style-Tag machen:

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

Sie können ein Tool auf der Serverseite verwenden, um das Stil-Tag abhängig vom aktiven Stil zu aktualisieren. In Ruby konnte man dies mit Nokogiri erreichen. SVG ist nur XML. Es gibt also wahrscheinlich viele XML-Bibliotheken, die dies wahrscheinlich erreichen können.

Wenn Sie das nicht können, müssen Sie sie nur als PNGs verwenden. Erstellen eines Satzes für jeden Stil und Speichern seiner Stile inline.

70
RGB

Sie können machen, was Sie möchten, mit einer einzigen (wichtigen) Einschränkung: Die Pfade innerhalb Ihres Symbols können nicht unabhängig über externes CSS gestaltet werden. Sie können nur die Eigenschaften für das gesamte Symbol mit dieser Methode festlegen. Wenn Sie also zwei Pfade in Ihrem Symbol haben und wünschen, dass sie unterschiedliche Füllfarben haben, funktioniert dies nicht. Wenn Sie jedoch möchten, dass alle Pfade gleich sind, sollte dies funktionieren.

In Ihrer HTML-Datei möchten Sie etwa Folgendes:

<style>
  .fill-red { fill: red; }
  .fill-blue { fill: blue; }
</style>

<a href="//www.example.com/">
  <svg class="fill-red">
    <use xlink:href="images/icons.svg#example"></use>
  </svg>
</a>

Und in der externen SVG-Datei möchten Sie etwa Folgendes:

<svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="example" viewBox="0 0 256 256">
    <path d="M120.... />
  </symbol>
</svg>

Tauschen Sie die Klasse für das svg-Tag (in Ihrem HTML-Code) von fill-red in fill-blue und ta-da ... Sie haben Blau statt Rot.

Sie können die Einschränkung umgehen, dass Sie die Pfade separat mit externem CSS ansteuern können, indem Sie das externe CSS mit bestimmten Inline-CSS-Elementen für bestimmte Pfade mischen und abgleichen, da das Inline-CSS Vorrang hat. Dieser Ansatz funktioniert, wenn Sie ein weißes Symbol vor einem farbigen Hintergrund verwenden, bei dem Sie die Farbe des Hintergrunds über das externe CSS ändern möchten, das Symbol jedoch immer weiß ist (oder umgekehrt). Mit demselben HTML-Code wie zuvor und etwas wie diesem SVG-Code erhalten Sie einen roten Hintergrund und einen weißen Vordergrundpfad:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="example" viewBox="0 0 256 256">
    <path class="background" d="M120..." />
    <path class="icon" style="fill: white;" d="M20..." />
  </symbol>
</svg>
36
Adam Korman

Es ist möglich, eine SVG zu formatieren, indem ein Stilelement in JavaScript dynamisch erstellt und an das SVG-Element angehängt wird. Hacky, aber es funktioniert.

<object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg">
    Your browser does not support SVG
</object>
<script>
    var svgHolder = document.querySelector('object#dynamic-svg');
    svgHolder.onload = function () {
        var svgDocument = svgHolder.contentDocument;
        var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");

        // Now (ab)use the @import directive to load make the browser load our css
        style.textContent = '@import url("/css/your-dynamic-css.css");';

        var svgElem = svgDocument.querySelector('svg');
        svgElem.insertBefore(style, svgElem.firstChild);
    };
</script>

Sie können das JavaScript dynamisch in PHP generieren, wenn Sie möchten - die Tatsache, dass dies in JavaScript möglich ist, eröffnet unzählige Möglichkeiten.

5
Pete

Sie können beispielsweise CSS-Filter verwenden, um das Erscheinungsbild der SVG-Grafiken im Browser zu ändern.

Wenn Sie beispielsweise eine SVG-Grafik mit einer roten Füllfarbe im SVG-Code verwenden, können Sie sie mit einer Farbton-Drehung von 180 Grad lila färben:

#theIdOfTheImgTagWithTheSVGInIt {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}

Experimentieren Sie mit anderen Farbton-Rotation-Einstellungen, um die gewünschten Farben zu finden.

Um es klar zu sagen, das obige CSS geht in das CSS, das auf Ihr HTML-Dokument angewendet wird. Sie gestalten das img-Tag im HTML-Code und nicht im SVG-Code.

Beachten Sie, dass dies nicht mit Grafiken funktioniert, die schwarz oder weiß oder grau sind. Sie müssen eine tatsächliche Farbe haben, um den Farbton dieser Farbe zu drehen.

4
Simon White

Es sollte möglich sein, zuerst die externen SVG-Bilder zu integrieren. Schau hier zum Beispiel:

Alle Svg-Bilder durch Inline-Svg | ersetzen JAVASCRIPT | Code Snippet Library von Jess Frazelle

3
Leo

"Ich werde die Farben dieser Bilder tatsächlich ändern, je nachdem, welches Farbschema der Benutzer für meine Website gewählt hat." - Jordanienvor 10 Stunden

Ich schlage vor, dass Sie PHP verwenden. Es gibt wirklich keine bessere Möglichkeit, dies ohne Symbolzeichensätze zu tun. Wenn Sie sich weigern, sie zu verwenden, können Sie Folgendes versuchen:

<?php

    header('Content-Type: image/svg+xml');
    echo '<?xml version="1.0" encoding="utf-8"?>';
    $color = $_GET['color'];

?>
<!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" viewBox="0 0 56.69 56.69">
    <g>
        <path fill="<?php echo $color; ?>" d="M28.44..."/>
    </g>
</svg>

Später könnten Sie diese Datei als filename.php?color=#ffffff verwenden, um die svg-Datei in der gewünschten Farbe zu erhalten.

2
SeinopSys

Bei Verwendung in einem <image>-Tag muss SVG aus Datenschutzgründen in einer einzigen Datei enthalten sein. Dieser bugzilla-Fehler hat mehr Details darüber, warum dies so ist. Leider können Sie kein anderes Tag wie <iframe> verwenden, da dies nicht als Link funktioniert. Sie müssen das CSS in ein <style>-Tag in der Datei einbetten.

Eine andere Möglichkeit wäre, die SVG-Daten in der Haupt-HTML-Datei zu speichern, d. H.

<a href='http://youtube.com/...' target='_blank'>
  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
        <path d="M28.44......./>
    </g>
  </svg>
</a>

Sie können dies mit einer externen CSS-Datei unter Verwendung des HTML-Tags <link> gestalten.

2
Robert Longson

Eine sehr schnelle Lösung für einen dynamischen Stil mit einem externen CSS-Stylesheet, falls Sie das <object>-Tag verwenden, um Ihre SVG einzubetten.

In diesem Beispiel wird beim Klicken auf ein übergeordnetes Element dem <svg>-Tag der Klasse eine Klasse hinzugefügt.

file.svg:

<?xml-stylesheet type="text/css" href="../svg.css"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="">
  <g>
   <path/>
  </g>
 </svg>

html:

<a class="parent">
  <object data="file.svg"></object>
</a>

Jquery:

$(function() {
  $(document).on('click', '.parent', function(){
    $(this).find('object').contents().find('svg').attr("class","selected");
  }
});

klicken Sie auf das übergeordnete Element:

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">

dann können sie ihre css verwalten

svg.css:

path {
 fill:none;
 stroke:#000;
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

.selected path {
 fill:none;
 stroke:rgb(64, 136, 209);
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}
2
vhanahrni

Ich weiß, es ist ein alter Beitrag, aber nur um dieses Problem zu lösen ... Sie verwenden nur Ihren Unterricht an der falschen Stelle: D

Vor allem könnte man verwenden 

svg { fill: red; }

in deinem main.css um es rot zu bekommen. Das hat Wirkung. Sie können auch Knoten-Selektoren verwenden, um bestimmte Pfade zu erhalten.

Zweitens haben Sie die Klasse zum img-Tag deklariert. 

<img class='socIcon'....

Sie sollten es tatsächlich in Ihrer SVG erklären. Wenn Sie verschiedene Pfade haben, können Sie natürlich mehr definieren.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!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" viewBox="0 0 56.69 56.69">
<g>
    <path class="myClassForMyPath" d="M28.44......./>
</g>
</svg>

jetzt können Sie die Farbe in Ihrem main.css-Bild ändern

.myClassForMyPath {
    fill: yellow;
}
1
Dwza

Was für mich funktioniert: style-Tag mit @import-Regel

<defs>
    <style type="text/css">
        @import url("svg-common.css");
    </style>
</defs>
0
Fordi
  1. Für externe Stile

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	@import url(main.css);
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>

  1. Für interne Stile

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	    .socIcon g {fill:red;}
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>

Hinweis: Externe Stile funktionieren nicht, wenn Sie SVG im <img>-Tag einfügen. Es funktioniert perfekt im <div>-Tag

0
Yuvraj Patil

@leo hier ist die angleJS Version, danke nochmal 

G.directive ( 'imgInlineSvg', function () {

return {
    restrict : 'C',
    scope : true,
    link : function ( scope, elem, attrs ) {

        if ( attrs.src ) {

            $ ( attrs ).each ( function () {
                var imgID    = attrs.class;
                var imgClass = attrs.class;
                var imgURL   = attrs.src;

                $.get ( imgURL, function ( data ) {

                    var $svg = $ ( data ).find ( 'svg' );
                    if ( typeof imgID !== 'undefined' ) {
                        $svg = $svg.attr ( 'id', imgID );
                    }

                    if ( typeof imgClass !== 'undefined' ) {
                        $svg = $svg.attr ( 'class', imgClass + ' replaced-svg' );
                    }

                    $svg = $svg.removeAttr ( 'xmlns:a' );

                    elem.replaceWith ( $svg );

                } );

            } );
        }

    }

}

} );