Cómo cambiar el color de una imagen SVG mediante el uso de CSS (jQuery SVG sustitución de la imagen)?

Este es un auto Q&a de una pieza útil de código que se me ocurrió.

Actualmente, no hay una manera fácil de insertar una imagen SVG y, a continuación, tener acceso a los elementos SVG a través de CSS. Hay varios métodos de uso de JS SVG marcos, pero son demasiado complicados, si todo lo que están haciendo es un simple icono con un estado de rollover.

Así que aquí es lo que se me ocurrió, que creo que es por lejos la forma más fácil de usar archivos SVG en un sitio web. Toma su concepto a partir de la década de texto-a-la sustitución de la imagen de los métodos, pero como soy consciente de que nunca se ha hecho para SVGs.

Esta es la pregunta:

¿Cómo puedo incrustar un SVG y cambiar su color en CSS sin necesidad de utilizar un JS-SVG marco?

Por desgracia, la etiqueta img no funciona con archivos svg en IE, a fin de mantener en mente que. Es decir reconocer incrustar etiquetas. De todos modos, buen trabajo!
Para svg, debe utilizar el «relleno» de propiedades de css. Para las imágenes es apropiado para el uso de «filtro». «Filtro» de hecho, el trabajo de ambos, pero no es necesario hacer todo ese trabajo para un gráfico vectorial.

OriginalEl autor Drew Baker | 2012-08-16

15 Kommentare

  1. 511

    En primer lugar, el uso de una etiqueta IMG en tu HTML para insertar un gráfico SVG. He usado Adobe Illustrator para hacer el gráfico.

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

    Esto es igual a cómo se desea incrustar una imagen normal. Tenga en cuenta que usted necesita para establecer la IMG de tener una clase de svg. El ‘social-link’ de la clase es solo para los ejemplos bien. El ID no es necesario, pero es útil.

    A continuación, utilizar este código jQuery (en un archivo separado o en la línea de la CABEZA).

        /*
         * 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');
    
            });

    Lo que el código anterior hace es buscar todos los IMG, con la clase ‘svg’ y reemplazarla con la línea de SVG desde el archivo vinculado. La gran ventaja es que permite el uso de CSS para cambiar el color de la SVG ahora, así:

    svg:hover path {
        fill: red;
    }

    El código jQuery también escribí puertos a través de las imágenes originales ID y clases. Así que este CSS también:

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

    O:

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

    Puede ver un ejemplo de que el trabajo aquí:
    http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html

    Tenemos más complicado que la versión que incluye el almacenamiento en caché aquí:
    https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

    Puede que a veces no funciona en Safari (por ej.), para asegurar que los datos devueltos es legible, reemplazar el }); de $.obtener con }, 'xml');
    Probablemente usted podría incluso sustituir el selector con img[src$=".svg"] y eliminar la necesidad de la svg clase.
    No creo que hay una manera de orientar el relleno de una imagen de fondo. Sería súper útil si se pudiera, aunque!
    Un poco tarde, @LeonGaban, pero la mejor manera de hacerlo probablemente sería quitar el atributo de relleno por completo, y se basan en un archivo CSS para agregar un relleno a los padres svg. $('#ico_company path').removeAttr('fill'). Entonces se podría hacer #ico_company { fill: #ccc } en el archivo CSS
    Deseo de los navegadores para resolver este problema. La edición de svg con css es un caso de uso habitual

    OriginalEl autor Drew Baker

  2. 49

    Estilo

    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');
        });
    });
    Esta es una buena optimización!
    Por alguna razón esta respuesta trabajado, mientras que la aceptan un no.
    Si usted no tiene un ancho de attr, simplemente crea uno con un número equivocado. width="170.667" en mi caso
    Esto no es perfecta ya que se pierde la anterior img dimensiones.
    Hola supongamos que tengo diferentes svg con diferentes colores cada uno. Usando este método, todos mis svg colores se vuelven de la misma como la primera svg que se enlazan. ¿Alguna idea de cómo puedo maniobrar alrededor de este, de modo que cada color se mantiene igual que antes?

    OriginalEl autor Henrik Albrechtsson

  3. 24

    Si usted puede incluir los archivos (PHP include o incluir a través de su CMS de elección) en su página, usted puede agregar el SVG código para incluir en tu página. Esto funciona de la misma como pegar el SVG fuente en la página, pero hace que el marcado de página más limpia.

    El beneficio es que usted puede apuntar a partes de su SVG a través de CSS para hover-no requiere javascript.

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

    Sólo tienes que utilizar una regla CSS como este:

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

    Tenga en cuenta que el !important bits es necesario reemplazar el color de relleno.

    Para aquellos que utilizan AngularJS: <div ng-include="'svg.svg'"></div>
    No es una solución muy elegante almacenamiento de datos svg en una base de datos, aunque. No se equivocan, pero el bombeo de xml/html/svg DOM datos de una API o de la CMS en lugar de mediante el uso de plantillas u otros activos sólo se siente mal.
    Gracias por este aporte … La más avanzada sitios de nido svg datos para permitir todo tipo de actividad, sin que esta respuesta no me hubiera imaginado que !
    Además, si su SVG tiene zonas transparentes, estos no cuentan como flotando y usted puede experimentar «llamativo hover». Para solucionar esto, sólo tiene que añadir un elemento contenedor (un <a>, si es conveniente) y, a continuación, añadir a la regla CSS. #pathidorclass:hover, .wrapperclass:hover #pathidorclass { fill: green; } O incluso eliminar el original sitúe el cursor sobre el SVG camino ya que son dirigidos a través del elemento contenedor ahora de todos modos.

    OriginalEl autor trebor1979

  4. 23

    Alternativamente, usted podría utilizar CSS mask, concedido compatibilidad del navegador no es buena, pero se podría utilizar un retroceso

    .frame {
        background: blue;
        -webkit-mask: url(image.svg) center / contain no-repeat;
    }
    MDN especifica que -webkit-mask no debe ser utilizado en cualquier sitio web de producción.
    No funciona en firefox.
    no el color de la svg

    OriginalEl autor seanjacob

  5. 18

    @Drew Baker dio una gran solución para resolver el problema. El código funciona correctamente. Sin embargo, aquellos que se utiliza AngularJs puede encontrar un montón de dependencia en jQuery. En consecuencia, pensé que es una buena idea para la pasta de AngularJS los usuarios, un código siguiente @Drew Baker solución.

    AngularJs forma del mismo código

    1. Html: utilizar el bramido de la etiqueta en que archivo html:

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

    2. La directiva: esta será la directiva, que deberá reconocer la etiqueta:

    '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. La unidad de prueba con el karma-jazmín:

    '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]);
      });
    });
    su solución no funciona, podría ser <div ng-include="/icons/my.svg" class="any-class-you-wish"></div>
    si quieres usarlo con ng-include y cambiar esta línea var imgURL = element.attr('src'); a var imgURL = element.attr('ng-include');
    Esta es una solución muy práctica, pero tenga cuidado en el uso excesivo de como se puede golpear rendimiento bastante duro – I. E. un conjunto de 5 iconos para compartir repite en un artículo en el listado o algo por el estilo.
    Hay un problema con el código en IE. Usted puede usar simplemente if (typeof(imgClass) !== 'undefined') { $svg.setAttribute("class", imgClass); } en lugar de dividir y bucle for.
    Impresionante trabajo! Pero para ciertos imagen que usted necesita para agarrar el primer elemento de la svg (angular.element(data)[0];) y hacer que funcione con IE uso if ($svg.getAttribute('class')) { $svg.setAttribute('class', $svg.getAttribute('class') + ' ' + imgClass); } else { $svg.setAttribute('class', imgClass); }. También es posible que desee agregar cache: true a las opciones de $http.get de lo contrario su página puede ser muy lento.

    OriginalEl autor Max

  6. 11

    Me doy cuenta de que estás queriendo lograr con CSS, pero sólo un recordatorio de que en caso de que se trata de un pequeño, simple imagen – siempre puedes pop abrir en el Bloc de notas++ y cambiar la ruta de acceso/whateverelement de relleno:

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

    Se podría ahorrar una tonelada de feo secuencia de comandos. Lo siento si es fuera de la base, pero a veces las soluciones simples, puede ser pasado por alto.

    …incluso el intercambio de múltiples imágenes svg puede ser de menor tamaño que el de algunos de los fragmentos de código para esta pregunta.

    impresionante!!! – exactamente lo que yo estaba buscando: fácil, normal, limpio y funciona como un encanto!

    OriginalEl autor DShultz

  7. 7

    Escribí una directiva para resolver este problema con AngularJS. Está disponible aquí – ngReusableSvg.

    Reemplaza el elemento SVG después de que haya sido dictado, y la coloca dentro de un div elemento, por lo que su CSS fácilmente cambiables. Esto ayuda a usar el mismo archivo SVG en diferentes lugares con diferentes tamaños/colores.

    El uso es 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>

    Después de eso, usted puede fácilmente tener:

    .svg-class svg {
        fill: red; //whichever color you want
    }
    Bueno, exactamente lo que estaba buscando!
    Me alegro de que ayudado 🙂
    Hola, gracias por proporcionar esta solución. Yo lo he probado y el resultado es: <div ng-click=»eventHandler()» ng-class=»classEventHandler()» style=»height:30px; width:30px;float:left;» class=»svg-clase» id=»mi-svg» height=»30″ width=»30″>[[object SVGSVGElement]]</div> En el html entonces sólo pone [[object SVGSVGElement]]. ¿Sabes cuál es el problema? Otra pregunta, ¿tiene un gran impacto en el rendimiento o la puedo utilizar en muchos svg en una página? Y por último, todavía en angular 1.3 (la glorieta).
    La versión de angular estás usando? No he encontrado el problema.. tal vez es algo que con el SVG? En cuanto al rendimiento el interruptor es relativamente pesado, he utilizado yo mismo como 10 y estaba bien.. supongo que depende de la cantidad/tamaño, de modo de prueba y experimentar con ella. ¿Cuál es el problema con la bower? Estás usando una versión diferente y hay un conflicto?

    OriginalEl autor Omri Aharon

  8. 4

    Aquí una versión para knockout.js basa en la aceptación de respuesta:

    Importante: Lo hace realmente requieren jQuery también para la sustitución, pero pensé que podría ser útil para algunos.

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

    A continuación, sólo hay que aplicar data-bind="svgConvert: true" a su etiqueta img.

    Esta solución reemplaza completamente el img etiqueta con un SVG y cualesquiera otros enlaces no serían respetadas.

    Esto es genial! Si quieres llevarlo al siguiente nivel, tenemos una versión actualizada que incluye el almacenamiento en caché, por lo que el mismo SVG no es solicitado dos veces. github.com/funkhaus/style-guide/blob/master/template/js/…
    Yo estaba un poco preocupado por eso, pero no tienen tiempo para mirar a mí mismo. Sólo necesitaba algo rápido
    en realidad, yo estaba más preocupado de que la etiqueta img en solicitar el archivo y, a continuación, el get lo pediría de nuevo. He considerado que el cambio de la src a un data-src atributo en el img etiqueta, pero llegó a la conclusión de que los navegadores modernos son probablemente lo suficientemente inteligente como para almacenar en caché el archivo de todos modos

    OriginalEl autor Simon_Weaver

  9. 4

    Aquí un framework de código, de puro 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)
            })

    OriginalEl autor user3144480

  10. 3

    No es una librería de código libre llamado SVGInject que utiliza el onload atributo para desencadenar la inyección. Usted puede encontrar el GitHub del proyecto en https://github.com/iconfu/svg-inject

    Aquí es un ejemplo mínimo el uso de SVGInject:

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

    Después de que la imagen se carga el onload="SVGInject(this) va a desencadenar la inyección y la <img> elemento será reemplazado por el contenido del archivo SVG, siempre en el src atributo.

    Que resuelve varios de los problemas SVG inyección:

    1. SVGs pueden estar ocultas hasta que la inyección ha terminado. Esto es importante si un estilo es que ya se aplica durante el tiempo de carga, que de lo contrario podrían causar un breve «sin estilo contenido flash».

    2. La <img> elementos inyectar themselved automáticamente. Si agrega SVGs dinámicamente, usted no tiene que preocuparse de llamar a la inyección de la función de nuevo.

    3. Una cadena aleatoria se agrega a cada ID en el SVG para evitar tener el mismo ID varias veces en el documento si SVG es inyectado más de una vez.

    SVGInject es simple Javascript y funciona con todos los navegadores que soportan SVG.

    Descargo de responsabilidad: yo soy el co-autor de SVGInject

    OriginalEl autor Waruyama

  11. 2

    Si tenemos un mayor número de imágenes svg también puede tomar la ayuda de la fuente de los archivos.

    Sitios como https://glyphter.com/ nos puede llevar a un archivo de fuente de nuestra svgs.


    E. g.

    @font-face {
        font-family: 'iconFont';
        src: url('iconFont.eot');
    }
    #target{
        color: white;
        font-size:96px;
        font-family:iconFont;
    }
    Yo personalmente odio las «imágenes como una fuente» de la técnica. Se hace difícil añadir/editar imágenes, añade un montón de absurdas marcado. La fuente debe ser de las fuentes, las imágenes deben ser imágenes, etc.
    De acuerdo. También es necesario recordar/búsqueda de las imágenes asignadas a los personajes. pero para el caso específico en el cual se utilizan las imágenes como iconos de botón//balas, actúan más como texto de los medios de comunicación, la fuente de los archivos también pueden ser una alternativa
    incluso github no utilizar el tipo de letra más para el icono de github.com/blog/2112-delivering-octicons-with-svg

    OriginalEl autor Abhishek Borar

  12. 2

    Desde SVG es básicamente el código, usted sólo necesita contenido. He usado PHP para obtener el contenido, pero puedes usar las que quieras.

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

    Entonces, he impreso el contenido de «como está» dentro de un div contenedor

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

    Para finalmente establecer la regla de contenedores del SVG niño en CSS

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

    Tengo este resultados con un material icono SVG:

    1. Mozilla Firefox 59.0.2 (64-bit) Linux

    Cómo cambiar el color de una imagen SVG mediante el uso de CSS (jQuery SVG sustitución de la imagen)?

    1. Google Chrome66.0.3359.181 (Versión oficial) (64 bits), Linux

    Cómo cambiar el color de una imagen SVG mediante el uso de CSS (jQuery SVG sustitución de la imagen)?

    1. Ópera 53.0.2907.37 Linux

    Cómo cambiar el color de una imagen SVG mediante el uso de CSS (jQuery SVG sustitución de la imagen)?

    OriginalEl autor Benjamin

  13. 1

    La solución seleccionada está bien si se quiere jQuery para todos los procesos de svg elementos en el DOM y su DOM es de un tamaño razonable. Pero si su DOM es grande y decide cargar piezas de su DOM de forma dinámica, no tiene sentido tener que volver a escanear todo el DOM sólo para actualizar elementos svg. En su lugar, utilice un plugin de jQuery para hacer esto:

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

    En html, especifique un elemento svg como sigue:

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

    Y aplicar el plugin:

    $(".mySVGClass").svgLoader();
    Sí, ciertamente hay maneras más eficientes de utilizar el código que me dio. Aquí es cómo utilizar realmente en los sitios de producción. Almacena en caché de SVGs! github.com/funkhaus/style-guide/blob/master/template/js/…

    OriginalEl autor AndroidDev

  14. 0

    para :evento hover animaciones podemos a la izquierda los estilos dentro de un archivo svg,
    como 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>

    comprobar esto en svgshare

    OriginalEl autor Aleksandr Ivanitskiy

  15. -3

    Si se trata de un cambio estático, a continuación, abra el archivo pdf en Adobe Illustrator (o cualquier SVG editor) cambiar el color y guardar.

    Que no parecen cumplir con los requisitos de la pregunta, que requieren que el color sea cambiado por CSS. También ya se ha sugerido como una solución en una de las otras respuestas.

    OriginalEl autor Azmeer

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea