Comment changer la couleur de L'image SVG en utilisant CSS (jQuery SVG image replacement)?

C'est une question-réponse sur un morceau de code pratique que j'ai inventé.

Actuellement, il n'y a pas de moyen facile d'intégrer une image SVG et d'avoir ensuite accès aux éléments SVG via CSS. Il existe diverses méthodes pour utiliser les cadres JS SVG, mais elles sont trop compliquées si tout ce que vous faites est de faire une icône simple avec un État de basculement.

donc voici ce que j'ai trouvé, qui je pense est de loin la façon la plus facile d'utiliser des fichiers SVG sur un site web. Il prend son concept des premières méthodes de remplacement texte-image, mais pour autant que je sache n'a jamais été fait pour SVGs.

C'est la question:

comment intégrer un SVG et changer sa couleur dans le CSS sans utiliser un cadre JS-SVG?

394
demandé sur Pang 2012-08-16 04:05:27

17 réponses

tout d'abord, utilisez une balise IMG dans votre HTML pour intégrer un graphique SVG. J'ai utilisé Adobe Illustrator pour faire le graphique.

<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>

c'est comme si tu avais intégré une image normale. Notez que vous devez configurer L'IMG pour avoir une classe de svg. La classe "lien social" n'est qu'un exemple. L'ID N'est pas nécessaire, mais il est utile.

puis utilisez ce code jQuery (dans un fichier séparé ou en ligne dans la tête).

    /*
     * Replace all SVG images with inline SVG
     */
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(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);

            }, 'xml');

        });

ce que le code ci-dessus fait est de rechercher tous les IMG avec la classe 'svg' et de le remplacer par la SVG en ligne à partir du fichier lié. L'énorme avantage est qu'il vous permet d'utiliser CSS pour changer la couleur de la SVG maintenant, comme cela:

svg:hover path {
    fill: red;
}

le code jQuery que j'ai écrit est aussi porté à travers les images originales ID et classes. Donc ce CSS fonctionne aussi:

#facebook-logo:hover path {
    fill: red;
}

ou:

.social-link:hover path {
    fill: red;
}

Vous pouvez voir un exemple de travail ici: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html

nous avons une version plus compliquée qui inclut la mise en cache ici: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

506
répondu Drew Baker 2016-10-01 18:55:16

Style

svg path {
    fill: #000;
}

Script

$(document).ready(function() {
    $('img[src$=".svg"]').each(function() {
        var $img = jQuery(this);
        var imgURL = $img.attr('src');
        var attributes = $img.prop("attributes");

        $.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Remove any invalid XML tags
            $svg = $svg.removeAttr('xmlns:a');

            // Loop through IMG attributes and apply on SVG
            $.each(attributes, function() {
                $svg.attr(this.name, this.value);
            });

            // Replace IMG with SVG
            $img.replaceWith($svg);
        }, 'xml');
    });
});
48
répondu Henrik Albrechtsson 2016-02-01 09:21:15

si vous pouvez inclure des fichiers (PHP include ou include via votre CMS de choix) dans votre page, vous pouvez ajouter le code SVG et l'inclure dans votre page. Cela fonctionne de la même manière que coller la source SVG dans la page, mais rend le markup de page plus propre.

l'avantage est que vous pouvez cibler des parties de votre SVG via CSS pour le vol stationnaire -- pas de javascript requis.

http://codepen.io/chriscoyier/pen/evcBu

Vous avez juste à utiliser une règle CSS comme ceci:

#pathidorclass:hover { fill: #303 !important; }

noter que le bit !important est nécessaire pour outrepasser la couleur de remplissage.

23
répondu trebor1979 2013-10-01 16:01:10

alternativement, vous pouvez utiliser CSS mask , accordé prise en charge du navigateur n'est pas bon, mais vous pouvez utiliser un repli

.frame {
    background: blue;
    -webkit-mask: url(image.svg) center / contain no-repeat;
}
23
répondu seanjacob 2014-11-18 19:21:46

vous pouvez maintenant utiliser le CSS filter propriété dans navigateurs les plus modernes (y compris Edge, mais pas IE11). Il fonctionne sur les images SVG ainsi que d'autres éléments. Vous pouvez utiliser hue-rotation ou invert pour modifier les couleurs, bien qu'ils ne vous permettent pas de modifier différentes couleurs indépendamment. J'utilise la classe CSS suivante pour afficher une version" désactivée "d'une icône (où l'original est une image SVG avec une couleur saturée):

.disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

cela le rend gris clair dans la plupart des navigateurs. Dans IE (et probablement Opera Mini, que je n'ai pas testé) il est visiblement effacé par la propriété opacity, qui semble toujours assez bonne, bien qu'il ne soit pas Gris.

voici un exemple avec quatre classes CSS différentes pour le Twemoji icône de cloche: original (jaune), le ci-dessus" désactivé "classe, hue-rotate (vert), et invert (bleu).

.twa-bell {
  background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em;
}
.grey-out {
  opacity: 0.4;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.hue-rotate {
  filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
}
.invert {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <span class="twa-bell"></span>
  <span class="twa-bell grey-out"></span>
  <span class="twa-bell hue-rotate"></span>
  <span class="twa-bell invert"></span>
</body>

</html>
21
répondu aldel 2016-06-28 19:10:37

@Drew Baker a donné une grande solution pour résoudre le problème. Le code fonctionne correctement. Cependant, ceux qui utilisent AngularJs peuvent trouver beaucoup de dépendance à jQuery. Par conséquent, j'ai pensé que c'était une bonne idée de coller pour les utilisateurs D'AngularJS, un code suivant la solution de @Drew Baker.

AngularJs way du même code

1. Html : utilisez la balise bellow dans votre fichier html:

<svg-image src="/icons/my.svg" class="any-class-you-wish"></svg-image>

2. Directive : ce sera la directive que vous devrez reconnaître la balise:

'use strict';
angular.module('myApp')
  .directive('svgImage', ['$http', function($http) {
    return {
      restrict: 'E',
      link: function(scope, element) {
        var imgURL = element.attr('src');
        // if you want to use ng-include, then
        // instead of the above line write the bellow:
        // var imgURL = element.attr('ng-include');
        var request = $http.get(
          imgURL,
          {'Content-Type': 'application/xml'}
        );

        scope.manipulateImgNode = function(data, elem){
          var $svg = angular.element(data)[4];
          var imgClass = elem.attr('class');
          if(typeof(imgClass) !== 'undefined') {
            var classes = imgClass.split(' ');
            for(var i = 0; i < classes.length; ++i){
              $svg.classList.add(classes[i]);
            }
          }
          $svg.removeAttribute('xmlns:a');
          return $svg;
        };

        request.success(function(data){
          element.replaceWith(scope.manipulateImgNode(data, element));
        });
      }
    };
  }]);

3. CSS :

.any-class-you-wish{
    border: 1px solid red;
    height: 300px;
    width:  120px
}

4. Des tests unitaires avec karma-jasmin :

'use strict';

describe('Directive: svgImage', function() {

  var $rootScope, $compile, element, scope, $httpBackend, apiUrl, data;

  beforeEach(function() {
    module('myApp');

    inject(function($injector) {
      $rootScope = $injector.get('$rootScope');
      $compile = $injector.get('$compile');
      $httpBackend = $injector.get('$httpBackend');
      apiUrl = $injector.get('apiUrl');
    });

    scope = $rootScope.$new();
    element = angular.element('<svg-image src="/icons/icon-man.svg" class="svg"></svg-image>');
    element = $compile(element)(scope);

    spyOn(scope, 'manipulateImgNode').andCallThrough();
    $httpBackend.whenGET(apiUrl + 'me').respond(200, {});

    data = '<?xml version="1.0" encoding="utf-8"?>' +
      '<!-- Generator: Adobe Illustrator 17.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">' +
      '<!-- Obj -->' +
      '<!-- Obj -->' +
      '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"' +
      'width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">' +
        '<g>' +
          '<path fill="#F4A902" d=""/>' +
          '<path fill="#F4A902" d=""/>' +
        '</g>' +
      '</svg>';
    $httpBackend.expectGET('/icons/icon-man.svg').respond(200, data);
  });

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('should call manipulateImgNode atleast once', function () {
    $httpBackend.flush();
    expect(scope.manipulateImgNode.callCount).toBe(1);
  });

  it('should return correct result', function () {
    $httpBackend.flush();
    var result = scope.manipulateImgNode(data, element);
    expect(result).toBeDefined();
  });

  it('should define classes', function () {
    $httpBackend.flush();
    var result = scope.manipulateImgNode(data, element);
    var classList = ["svg"];
    expect(result.classList[0]).toBe(classList[0]);
  });
});
18
répondu Max 2015-02-23 08:18:55

je me rends compte que vous voulez accomplir ceci avec CSS, mais juste un rappel au cas où c'est une petite image simple - vous pouvez toujours l'ouvrir dans le bloc-notes++ et changer le chemin / le remplissage de quoi que ce soit:

<path style="fill:#010002;" d="M394.854,205.444c9.218-15.461,19.102-30.181,14.258-49.527
    ...
    C412.843,226.163,402.511,211.451,394.854,205.444z"/>

il pourrait sauver une tonne de scénario laid. Désolé s'il est hors-base, mais parfois les solutions simples peuvent être négligées.

...même le fait d'échanger plusieurs images svg pourrait être plus petit en taille que certains des morceaux de code pour cela question.

11
répondu DShultz 2018-01-31 21:03:32

j'ai écrit une directive pour résoudre ce problème avec AngularJS. Il est disponible ici - ngReusableSvg .

il remplace L'élément SVG après qu'il a été rendu, et le place à l'intérieur d'un div élément, ce qui rend son CSS facilement modifiable. Cela aide à utiliser le même fichier SVG dans différents endroits en utilisant différentes tailles / couleurs.

l'usage est simple:

<object oa-reusable-svg
        data="my_icon.svg"
        type="image/svg+xml"
        class="svg-class"
        height="30"  // given to prevent UI glitches at switch time
        width="30">
</object>

Après cela, vous pouvez facilement ont:

.svg-class svg {
    fill: red; // whichever color you want
}
7
répondu Omri Aharon 2015-09-16 20:21:10

Voici une version pour knockout.js basée sur la réponse acceptée:

Important: Il n'a réellement besoin de jQuery pour le remplacer, mais j'ai pensé qu'il pourrait être utile à certains.

ko.bindingHandlers.svgConvert =
    {
        'init': function ()
        {
            return { 'controlsDescendantBindings': true };
        },

        'update': function (element, valueAccessor, allBindings, viewModel, bindingContext)
        {
            var $img = $(element);
            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);

            }, 'xml');

        }
    };

alors appliquez data-bind="svgConvert: true" à votre étiquette img.

cette solution remplace complètement l'étiquette img par un SVG et toute reliure supplémentaire ne serait pas respectée.

4
répondu Simon_Weaver 2016-10-01 02:53:15

voici un code sans cadre, seulement js pur:

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)
        })
4
répondu user3144480 2017-11-17 10:22:32

il existe une bibliothèque libre appelée SVGInject qui utilise l'attribut onload pour déclencher l'injection. Vous pouvez trouver le projet GitHub à https://github.com/iconfu/svg-inject

voici un exemple minimal d'utilisation de SVGInject:

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

après le chargement de l'image ,le onload="SVGInject(this) déclenche l'injection et l'élément <img> est remplacé par le contenu du fichier SVG fourni dans l'attribut src .

Il résout plusieurs problèmes avec les SVG d'injection:

  1. les SVG peuvent être cachés jusqu'à la fin de l'injection. Ceci est important si un style est déjà appliqué pendant le temps de charge, ce qui causerait sinon un bref "flash de contenu non-rayé".

  2. les éléments <img> s'injectent automatiquement. Si vous ajoutez des SVG dynamiquement, vous n'avez pas à n'oubliez pas d'appeler à nouveau la fonction d'injection.

  3. une chaîne aléatoire est ajoutée à chaque ID dans la SVG pour éviter d'avoir le même ID plusieurs fois dans le document si une SVG est injectée plus d'une fois.

SVGInject est Javascript et fonctionne avec tous les navigateurs qui supportent SVG.

clause de non-responsabilité: je suis le co-auteur de SVGInject

3
répondu Waruyama 2018-09-04 16:04:04

si nous avons un plus grand nombre de telles images svg, nous pouvons aussi prendre l'aide de font-files.

Sites comme https://glyphter.com / peut nous obtenir un fichier de police à partir de nos svgs.


E. G.

@font-face {
    font-family: 'iconFont';
    src: url('iconFont.eot');
}
#target{
    color: white;
    font-size:96px;
    font-family:iconFont;
}
2
répondu Abhishek Borar 2015-07-07 19:25:46

puisque SVG est essentiellement du code, vous avez juste besoin de contenu. J'ai utilisé PHP pour obtenir du contenu, mais vous pouvez utiliser tout ce que vous voulez.

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

alors, j'ai imprimé le contenu " tel quel "dans un conteneur div

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

Pour enfin définir la règle de conteneur SVG childs sur CSS

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

j'ai obtenu ce résultat avec une icône de matériel SVG:

  1. Mozilla Firefox 59.0.2 (64 bits) Linux

enter image description here

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

enter image description here

  1. Opéra 53.0.2907.37 Linux

enter image description here

2
répondu Benjamin 2018-06-06 20:17:41

la solution choisie est très bien si vous voulez que jQuery traite tous les éléments svg de votre DOM et que votre DOM soit de taille raisonnable. Mais si votre DOM est grand et que vous décidez de charger des parties de votre DOM de manière dynamique, cela n'a vraiment aucun sens d'avoir à restaurer le DOM entier juste pour mettre à jour les éléments svg. Au lieu de cela, utilisez un plugin jQuery pour faire ceci:

/**
 * A jQuery plugin that loads an svg file and replaces the jQuery object with its contents.
 *
 * The path to the svg file is specified in the src attribute (which normally does not exist for an svg element).
 *
 * The width, height and class attributes in the loaded svg will be replaced by those that exist in the jQuery object's
 * underlying html. Note: All other attributes in the original element are lost including the style attribute. Place
 * any styles in a style class instead.
 */
(function ($) {
    $.fn.svgLoader = function () {
        var src = $(this).attr("src");
        var width = this.attr("width");
        var height = this.attr("height");
        var cls = this.attr("class");
        var ctx = $(this);

        // Get the svg file and replace the <svg> element.
        $.ajax({
            url: src,
            cache: false
        }).done(function (html) {
            let svg = $(html);
            svg.attr("width", width);
            svg.attr("height", height);
            svg.attr("class", cls);
            var newHtml = $('<a></a>').append(svg.clone()).html();
            ctx.replaceWith(newHtml);
        });

        return this;
    };

}(jQuery));

dans votre html, spécifiez un élément svg comme suit:

<svg src="images/someSvgFile.svg" height="45" width="45" class="mySVGClass"/>

et appliquer le plugin:

$(".mySVGClass").svgLoader();
1
répondu AndroidDev 2017-06-08 06:33:41

vous pouvez utiliser data-image pour cela. en utilisant data-image (data-URI) vous pouvez accéder à SVG comme inline.

Voici l'effet de retournement en utilisant CSS pur et SVG.

je le sais malpropre mais vous pouvez le faire de cette façon.

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

vous pouvez convertir votre svg en url de données ici

  1. https://codepen.io/elliz/full/ygvgay
  2. https://websemantics.uk/tools/svg-to-background-image-conversion /
0
répondu patelarpan 2018-05-07 12:09:35

pour les :hover événement, des animations de nous pouvons gauche les styles à l'intérieur de fichier svg, comme un

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <style>
  rect {
    fill:rgb(165,225,75);
    stroke:none;
    transition: 550ms ease-in-out;
    transform-origin:125px 125px;
  }
  rect:hover {
    fill:rgb(75,165,225);
    transform:rotate(360deg);
  }
  </style>
</defs>
  <rect x='50' y='50' width='150' height='150'/>
</svg>

vérifiez sur svgshare

0
répondu Aleksandr Ivanitskiy 2018-06-20 12:57:32

S'il s'agit d'un changement statique, ouvrez le fichier SVG dans Adobe Illustrator (ou tout autre éditeur SVG approprié) changez la couleur et sauvegardez-le.

-3
répondu Azmeer 2018-04-22 09:48:39