img src SVG cambiar el color de relleno

html

<img src="logo.svg" alt="Logo" class="logo-img">

css

.logo-img path {
  fill: #000;
}

La anterior svg cargas y nativa es fill: #fff pero cuando uso el anterior css para intentar cambiar a negro no cambia, esta es mi primera vez jugando con SVG y no estoy seguro de por qué no funciona.

Usted no puede afectar a SVG imágenes como que…sólo en línea SVG elementos
Posibles duplicados de link, incluyendo la aceptación de la respuesta
Posibles duplicados de Cómo cambiar el color de una imagen SVG mediante el uso de CSS (jQuery imagen SVG reemplazo)?
Su intento parece lógico. Lástima que no funciona de esa manera.
Compruebe mi respuesta aquí para utilizar el contenido de SVG y CSS. stackoverflow.com/questions/11978995/…

OriginalEl autor ngplayground | 2014-07-24

12 Kommentare

  1. 189

    Que usted necesita para hacer el SVG para ser un en línea SVG. Usted puede hacer uso de este script, mediante la adición de una clase svg a la imagen:

    /*
     * 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');
    
            //Check if the viewport is set, if the viewport is not set the SVG wont't scale.
            if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
                $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
            }
    
            //Replace image with new SVG
            $img.replaceWith($svg);
    
        }, 'xml');
    
    });

    Y entonces, ahora que si se hace:

    .logo-img path {
      fill: #000;
    }

    O puede ser:

    .logo-img path {
      background-color: #000;
    }

    Esto funciona!

    Violín: http://jsfiddle.net/wuSF7/462/

    Créditos para la secuencia de comandos anterior: Cómo cambiar el color de una imagen SVG mediante el uso de CSS (jQuery SVG sustitución de la imagen)?

    Si desea utilizar este script para varios guiones he adaptado el guión ligeramente. jsfiddle.net/wuSF7/31
    Hola, esto es malo culo!! Realmente es un truco. No estoy seguro de lo «bueno» es, sin embargo, usted sabe a qué me refiero? Esto se siente muy chapucero. Es decir: realmente fresco y creativo respuesta, pero no estoy seguro de que yo nunca lo hacen de esta manera. Sin embargo, para jugar devils advocate, no te quiero hacer algo como el uso de datos de atributos en lugar del atributo src para evitar que el activo de la carga dos veces? O será que la caché del navegador, simplemente regrese esta segunda petición? Hmmm.. curioso.
    Parece que la carga de la memoria caché w/fuera una 2ª petición de red: i.imgur.com/o5gjY3O.png
    Este es el vínculo de trabajo dada por @Dave : jsfiddle.net/wuSF7/2281
    Compruebe la otra respuesta: stackoverflow.com/a/43015413

    OriginalEl autor Praveen Kumar Purushothaman

  2. 93

    Si su objetivo es sólo para cambiar el color del logo, y no necesariamente se debe utilizar CSS, entonces no use javascript o jquery como fue sugerido por algunas de las respuestas anteriores.

    Precisamente, responder a la pregunta original, solo tienes que:

    1. Abrir su logo.svg en un editor de texto.

    2. buscar fill: #fff y reemplazarlo con fill: #000

    Por ejemplo, su logo.svg podría tener este aspecto cuando se abre en un editor de texto:

    <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0h24v24H0z" fill="none"/>
      <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
    </svg>

    … acabo de cambiar el relleno y guardar.

    Buena y sencilla respuesta para la mayoría de los casos.
    … y si no hay que «rellenar», usted puede simplemente añadir a la path o circle elementos como <path fill="#777777" d="m129.774,74.409c-5.523,....
    Bueno para móviles rendimiento del navegador
    ¿qué pasa si mi logo tiene un color en la cabecera y otro color en el pie de página?
    puede utilizar también el fill="currentColor", a continuación, utilizar la color en el elemento principal css-tricks.com/cascading-svg-fill-color

    OriginalEl autor Rowe Morehouse

  3. 34

    Puede establecer su svg como una máscara. De esa manera el establecimiento de un fondo del color de la actuaría como su color de relleno.

    HTML

    <div class="logo"></div>

    CSS

    .logo {
        background-color: red;
        -webkit-mask: url(logo.svg) no-repeat center;
        mask: url(logo.svg) no-repeat center;
    }

    JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/

    Por favor, tenga en cuenta que este método no funciona para el explorador de Borde. Usted puede comprobarlo a través de este sitio web: https://caniuse.com/#search=mask

    Así que para nada, pero la página web interna inutilizable.
    El 89% de apoyo global como de 29 de Mayo de 2016.
    No funciona en IE 11 (11.608.15063.0)
    Bueno, pero probablemente no es útil para la animación svgs.

    OriginalEl autor André Kuhlmann

  4. 16

    La respuesta de @Praveen es sólido.

    No podía llegar a responder en mi trabajo, así que he hecho un jquery hover función.

    CSS

    .svg path {
       transition:0.3s all !important;
    }

    JS /JQuery

    //code from above wrapped into a function
    replaceSVG();
    
    //hover function
    //hover over an element, and find the SVG that you want to change
    $('.element').hover(function() {
        var el = $(this);
        var svg = el.find('svg path');
        svg.attr('fill', '#CCC');
    }, function() {
        var el = $(this);
        var svg = el.find('svg path');
        svg.attr('fill', '#3A3A3A');
    });
    no, esto sólo funciona si el SVG fue en línea para empezar?
    Sí—pero si estás trabajando con muchos archivos SVG o actualizar periódicamente, es un dolor de manejar.

    OriginalEl autor Matt Wujek

  5. 11

    ¿Por qué no crear una webfont con su imagen svg o imágenes, importar el webfont en el css y, a continuación, sólo cambia el color de la glifo usando el css atributo de color?
    No javascript necesario

    El amor esta solución!
    Si su svg tiene varios elementos de diferentes colores, esto se convierte en una solución muy chapucero (varios elementos interpuestos).
    Esta es una solución sólo para imágenes vectoriales que tienen 1 color en ellos. ver bpulecio la respuesta para más detalles
    buena solución, simple, escala de grises iconos
    Porque no hay ningún icono de texto. Fuentes para el texto. Los svg son para los iconos.

    OriginalEl autor gringo

  6. 10

    Esta respuesta está basada en la respuesta https://stackoverflow.com/a/24933495/3890888 pero con un simple JavaScript versión de la secuencia de comandos que utiliza.

    Que usted necesita para hacer el SVG para ser un en línea SVG. Usted puede hacer uso de este script, mediante la adición de una clase svg a la imagen:

    /*
     * Replace all SVG images with inline SVG
     */
    document.querySelectorAll('img.svg').forEach(function(img){
        var imgID = img.id;
        var imgClass = img.className;
        var imgURL = img.src;
    
        fetch(imgURL).then(function(response) {
            return response.text();
        }).then(function(text){
    
            var parser = new DOMParser();
            var xmlDoc = parser.parseFromString(text, "text/xml");
    
            //Get the SVG tag, ignore the rest
            var svg = xmlDoc.getElementsByTagName('svg')[0];
    
            //Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                svg.setAttribute('id', imgID);
            }
            //Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                svg.setAttribute('class', imgClass+' replaced-svg');
            }
    
            //Remove any invalid XML tags as per http://validator.w3.org
            svg.removeAttribute('xmlns:a');
    
            //Check if the viewport is set, if the viewport is not set the SVG wont't scale.
            if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
                svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
            }
    
            //Replace image with new SVG
            img.parentNode.replaceChild(svg, img);
    
        });
    
    });

    Y entonces, ahora que si se hace:

    .logo-img path {
      fill: #000;
    }

    O puede ser:

    .logo-img path {
      background-color: #000;
    }

    JSFiddle: http://jsfiddle.net/erxu0dzz/1/

    Genial.. funciona. además, si nuestra página tiene varios svgs entonces tendremos que poner fetch bloque en el IIFE.
    Genial!!! Funciona bien con ES6. Si no se preocupan por la IE 9 usted puede incluso utilizar: parser.parseFromString(text, "image/svg+xml");
    buen trabajo , yo prefiero usar este código sin jquery
    No funciona en un UIWebView en iOS 9.3.5. Yo creo podría ser debido a la utilización de fetch que fue agregado a Safari en 10.1 (developer.mozilla.org/en-US/docs/Web/API/Fetch_API). la versión de jQuery anterior no hace el trabajo.
    no funciona navegador móvil

    OriginalEl autor Seb3736

  7. 5

    Para ampliar @gringo respuesta, el código Javascript método descrito en otras respuestas, pero requiere que el usuario descargue innecesaria de archivos de imagen, y de la OMI, se hincha el código.

    Creo que un mejor enfoque sería para migrar todos los 1-color de los gráficos vectoriales a una webfont archivo. He usado Fort Impresionante en el pasado, y funciona muy bien para combinar sus iconos personalizados/imágenes en formato SVG, junto con la 3ª parte de los iconos que se pueden utilizar (Fuente Impresionante, Bootstrap iconos, etc.) en una sola webfont archivo el usuario tiene que descargar. También puede personalizar, por lo que sólo incluyen la 3ª parte de los iconos que usted está utilizando. Esto reduce el número de solicitudes de la página tiene que hacer, y estás general de la página de peso, especialmente si usted ya está incluida la 3ª parte de los iconos de las bibliotecas.

    Si prefiere dev orientado a la opción, usted podría Google «mecanismo nacional de prevención svg webfont», y el uso de uno de los nodos de los módulos más adecuados para su entorno.

    Una vez, que has hecho para cualquiera de las dos opciones, entonces usted puede cambiar fácilmente el color a través de CSS, y lo más probable es que usted ha acelerado su sitio en el proceso.

    Usted debe dar SVG sprites de un intento. En mi experiencia, la web de fuentes aleatorias de los problemas entre las versiones del navegador. Intente esto: fontastic.me – pero el uso de SVG sprite versiones – y ver lo que usted piensa. : )

    OriginalEl autor bpulecio

  8. 4

    2018: Si desea un color dinámico, no desea utilizar javascript y no quieren de una línea de SVG, usar un CSS variable. Funciona en Chrome, Firefox y Safari. edit: y el Borde

    <svg>
        <use xlink:href="logo.svg" style="--color_fill: #000;"></use>
    </svg>

    En su SVG, reemplazar todas las instancias de style="fill: #000" con style="fill: var(--color_fill)".

    ¿Cuál es el navegador soporte para este
    Chrome, Firefox, Safari y Borde
    Parece obsoleto en SVG 2
    Safari todavía requiere xlink:href. Todos los demás navegadores la soportan. ver: stackoverflow.com/a/43962207/552963
    enlaces a otros stackoverflow respuestas como «pruebas» son irrelevantes. cualquiera puede escribir cualquier cosa en esta plataforma. MDN: "This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped"

    OriginalEl autor northamerican

  9. 2

    Primero se tiene que inyectar el SVG en el DOM de HTML.

    No es una librería de código libre llamado SVGInject que hace esto para usted. Utiliza el onload atributo para desencadenar la inyección.

    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

  10. 1

    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:

    Mozilla Firefox 59.0.2 (64-bit) Linux

    img src SVG cambiar el color de relleno

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

    img src SVG cambiar el color de relleno

    Ópera 53.0.2907.37 Linux

    img src SVG cambiar el color de relleno

    No puedo downvote pero por favor, nunca vuelvas a hacer esto.
    Razones? Alternativas?

    OriginalEl autor Benjamin

  11. -1

    Si usted tiene acceso a JQuery, luego se extiende a Praveen la respuesta de uno puede cambiar mediante programación el color de los diferentes elementos anidados dentro de SVG:

    $('svg').find('path, text').css('fill', '#ffffff');

    Dentro de encontrar, se pueden mencionar los diferentes elementos que necesita ser cambiado en color.

    OriginalEl autor manyu

Kommentieren Sie den Artikel

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

Pruebas en línea