Comment styliser un SVG avec un CSS externe ?

Question

J'ai plusieurs graphiques SVG dont j'aimerais modifier les couleurs via mes feuilles de style externes - et non directement dans chaque fichier SVG. Je ne mets pas les graphiques en ligne, mais je les stocke dans mon dossier d'images et je pointe vers eux.

Je les ai implémentés de cette manière pour permettre aux infobulles de fonctionner, et j'ai également enveloppé chacun d'entre eux dans une balise <a> pour autoriser un lien.

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

Et voici le code du graphique SVG :

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

J'ai mis ce qui suit dans mon fichier CSS externe (main.css) :

.socIcon g {fill:red;}

Pourtant, cela n'a aucun effet sur le graphique. J'ai également essayé .socIcon g path {} y .socIcon path {} .

Quelque chose ne va pas, peut-être que ma mise en œuvre ne permet pas de modifier les CSS externes, ou que j'ai manqué une étape ? J'apprécierais vraiment votre aide ! J'ai juste besoin de la possibilité de modifier les couleurs du graphique SVG via ma feuille de style externe, mais je ne peux pas perdre la possibilité de créer des infobulles et des liens (je pourrais peut-être vivre sans infobulles cependant).

Answer 1

Je sais que c'est un vieux post, mais juste pour clarifier ce problème... vous utilisez juste vos classes au mauvais endroit :D

Tout d'abord, vous pouvez utiliser

svg { fill: red; }

dans votre main.css pour qu'il soit rouge. Cela a un effet. Vous pourriez probablement utiliser des sélecteurs de nœuds pour obtenir des chemins spécifiques.

La deuxième chose est que vous avez déclaré la classe à la img -tag.

<img class='socIcon'....

En fait, vous devriez le déclarer dans votre SVG. Si vous avez des chemins différents, vous pouvez en définir davantage, bien sûr.

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

Maintenant, vous pouvez changer la couleur dans votre main.css comme

.myClassForMyPath {
    fill: yellow;
}

Answer 2

@leo voici la version angularJS, merci encore

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

                } );

            } );
        }

    }

}

} );

Answer 3

Dans mon cas, j'ai appliqué display:block dans la classe extérieure.

Il faut expérimenter, là où ça convient.

Intérieur en ligne svg L'ajout de la classe et du style ne supprime même pas l'espace blanc ci-dessus.

Voir : où le display:block est appliqué.

<div class="col-3 col-sm-3 col-md-2  front-tpcard"><a class="noDecoration" href="#">
<img class="img-thumbnail img-fluid"><svg id="Layer_1"></svg>
<p class="cardtxt">Text</p>
</a>
</div>

La classe a appliqué

   .front-tpcard .img-thumbnail{
        display: block; /*To hide the blank whitespace in svg*/
    }

Ça a marché pour moi. Inner svg le cours n'a pas fonctionné

Answer 4

"Je vais en fait changer les couleurs de ces images en fonction de la palette de couleurs que l'utilisateur a choisie pour mon site." - Jordan Il y a 10 heures

Je vous suggère d'utiliser PHP pour cela. Il n'y a pas vraiment de meilleur moyen de faire cela sans les polices d'icônes, et si vous résistez à leur utilisation, vous pouvez essayer ceci :

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

Et plus tard, vous pourrez utiliser ce fichier comme filename.php?color=#ffffff pour obtenir le fichier svg dans la couleur souhaitée.

Answer 5

Cette méthode fonctionne si le svg est visualisé dans un navigateur web, mais dès que ce code est téléchargé sur le serveur et que la classe de l'icône svg est codée comme s'il s'agissait d'une image de fond, la couleur est perdue et revient à la couleur par défaut. Il semble que la couleur ne puisse pas être modifiée à partir de la feuille de style externe, même si la classe svg pour la couleur et la classe top layer pour l'affichage et la position du svg sont toutes deux mappées dans le même répertoire.