Jak stylizować SVG z zewnętrznym CSS?

Możesz robić, co chcesz, z jednym (ważnym) zastrzeżeniem: ścieżki w Twoim symbolu nie mogą być stylizowane niezależnie za pomocą zewnętrznego CSS - możesz ustawić właściwości tylko dla całego symbolu za pomocą tej metody. Jeśli w symbolu są dwie ścieżki i chcesz, aby miały różne kolory wypełnienia, nie będzie to działać, ale jeśli chcesz, aby wszystkie ścieżki były takie same, powinno to działać.

W pliku html chcesz coś takiego:

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

I w zewnętrznym pliku SVG, który chcesz coś takiego:

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

Zamień klasę na znacznik svg (w Twoim html) z fill-red na fill-blue i ta-da... masz niebieski zamiast czerwonego.

Możesz częściowo obejść ograniczenie możliwości kierowania ścieżek oddzielnie za pomocą zewnętrznego CSS, mieszając i dopasowując zewnętrzny CSS z niektórymi CSS in-line na określonych ścieżkach, ponieważ CSS in-line będzie miał pierwszeństwo. Takie podejście zadziała, jeśli robisz coś w rodzaju białej ikony na kolorowym tle, gdzie chcesz zmienić kolor tła za pomocą zewnętrznego CSS, ale sama ikona jest zawsze biała (lub odwrotnie). Tak więc, z tym samym HTML co wcześniej i czymś takim jak ten kod svg, otrzymasz czerwone tło i białą ścieżkę pierwszoplanową:

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

Możesz umieścić w plikach SVG link do zewnętrznego pliku css używając:

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>

Musisz umieścić to po otwarciu tagu:

<svg>
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
  <g>
    <path d=.../>
  </g>
</svg>

Nie jest to idealne rozwiązanie, ponieważ musisz zmodyfikować pliki svg, ale modyfikujesz je raz, a wszystkie zmiany stylizacji można zrobić w jednym pliku css dla wszystkich plików svg.

Można stylizować SVG, dynamicznie tworząc element stylu w JavaScript i dołączając go do elementu SVG. Hacky, ale działa.

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

Możesz generować JavaScript dynamicznie w PHP, jeśli chcesz - fakt, że jest to możliwe w JavaScript otwiera niezliczone możliwości.

Jednym z możliwych sposobów jest użycie filtrów CSS do zmiany wyglądu grafiki SVG w przeglądarce.

Na przykład, jeśli masz grafikę SVG, która używa koloru wypełnienia Czerwonego w kodzie SVG, możesz obrócić ją na kolor fioletowy z ustawieniem obrotu o 180 stopni:

#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);
}

Eksperymentuj z innymi ustawieniami odcień-rotate, aby znaleźć kolory, które chcesz.

Aby było jasne, powyższy CSS przechodzi do CSS, który jest stosowany do dokumentu HTML. Wpisujesz tag img w kodzie HTML, nie stylizując kodu SVG.

I zauważ, że to nie będzie działać z grafiką, która ma wypełnienie czarne, białe lub szare. Musisz mieć tam rzeczywisty kolor, aby obrócić odcień tego koloru.

Powinno być to możliwe przez wpięcie zewnętrznych obrazów svg. Poniższy kod pochodzi z Zastąp wszystkie obrazy SVG inline SVG autorstwa Jess frazelle.

$('img.svg').each(function(){
  var $img = $(this);
  var imgID = $img.attr('id');
  var imgClass = $img.attr('class');
  var imgURL = $img.attr('src');
  $.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // Add replaced image's ID to the new SVG
    if (typeof imgID !== 'undefined') {
      $svg = $svg.attr('id', imgID);
    }
    // Add replaced image's classes to the new SVG
    if (typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    // Remove any invalid XML tags as per http:validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');
    // Replace image with new SVG
    $img.replaceWith($svg);
  });
});

Bardzo szybkie rozwiązanie, aby mieć dynamiczny styl z zewnętrznym arkuszem stylów css, w przypadku, gdy używasz znacznika <object> do osadzenia svg.

Ten przykład doda klasę do znacznika głównego <svg> Po kliknięciu elementu nadrzędnego.

Plik.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");
  }
});

Po kliknięciu elementu nadrzędnego:

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

Następnie możesz zarządzać swoim css

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

W przypadku użycia w znaczniku <image> SVG musi być zawarty w jednym pliku ze względów prywatności. Ten błąd bugzilla zawiera więcej szczegółów na temat tego, dlaczego tak jest. Niestety nie możesz użyć innego znacznika, takiego jak <iframe>, ponieważ nie będzie on działał jako łącze, więc będziesz musiał osadzić CSS w znaczniku <style> wewnątrz samego pliku.

Innym sposobem na to jest posiadanie danych SVG w głównym pliku html, tj.

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

Możesz stylizować to za pomocą zewnętrznego pliku CSS za pomocą znacznik HTML <link>.

1. dla stylów zewnętrznych

<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. Dla Stylów Wewnętrznych

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

Uwaga: Style zewnętrzne nie będą działać, jeśli umieścisz SVG wewnątrz znacznika <img>. Doskonale sprawdzi się wewnątrz <div> tag

"mam zamiar zmienić kolory tych obrazów w zależności od tego, jaki schemat kolorów użytkownik wybrał dla mojej strony." - Jordania 10 godziny temu

Proponuję użyć do tego PHP. Nie ma lepszego sposobu, aby to zrobić bez czcionek ikon, a jeśli nie będziesz ich używać, możesz spróbować tego: {]}

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

I później możesz użyć tego pliku jako filename.php?color=#ffffff, Aby uzyskać plik svg w żądanym kolorze.

Co u mnie działa: znacznik stylu z regułą @ import

<defs>
    <style type="text/css">
        @import url("svg-common.css");
    </style>
</defs>

Wiem, że to stary post, ale żeby rozwiązać ten problem... po prostu korzystasz z zajęć w złym miejscu: D

Po pierwsze możesz użyć

svg { fill: red; }

W Twoim main.css aby było czerwone. To ma skutek. Prawdopodobnie możesz również użyć selektorów węzłów, aby uzyskać określone ścieżki.

Druga rzecz to to, że zdeklasowałeś klasę na img-Tag.

<img class='socIcon'....

Powinieneś usunąć to wewnątrz SVG. jeśli masz różne ścieżki, możesz zdefiniować więcej oczywiście.

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

Teraz możesz zmienić kolor w swoim main.css Jak

.myClassForMyPath {
    fill: yellow;
}

@leo tutaj jest wersja angularJS, dzięki jeszcze raz

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

                } );

            } );
        }

    }

}

} );

Ta metoda będzie działać, jeśli svg jest wyświetlany w przeglądarce internetowej, ale gdy tylko ten kod zostanie przesłany do serwera sever, a klasa ikony svg zostanie zakodowana tak, jakby była obrazem tła, kolor zostanie utracony i powróci do domyślnego koloru. Wygląda na to, że koloru nie można zmienić z zewnętrznego arkusza stylów, mimo że zarówno Klasa svg dla koloru, jak i klasa warstwy wierzchniej dla wyświetlania i pozycji svg są mapowane do tego samego katalogu.