css - style - title tag html5

Cambiar svg color

Question

Quiero utilizar esta técnica http://css-tricks.com/svg-fallbacks/ y cambiar el color del svg pero hasta ahora no he podido hacerlo. Puse esto en el CSS, pero mi imagen siempre es negra, pase lo que pase. Mi código:

<svg>
<image class="change-my-color" xlink:href="https://dl.dropboxusercontent.com/u/13823768/tumblr/iconmonstr-time-3-icon.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

y el CSS

.change-my-color {
    fill: green;
}

en jsfiddle: http://jsfiddle.net/Kk93M/

Answer 1

No puede cambiar el color de una imagen de esa manera. Si carga SVG como una imagen, no puede cambiar la forma en que se muestra con CSS o Javascript en el navegador.

Si desea cambiar su imagen SVG, debe cargarla usando <object> , <iframe> o usando <svg> inline.

Si desea utilizar las técnicas en la página, necesita la biblioteca Modernizr, donde puede verificar la compatibilidad con SVG y visualizar condicionalmente o no una imagen alternativa. A continuación, puede alinear su SVG y aplicar los estilos que necesita.

Ver http://jsfiddle.net/helderdarocha/6uRgS/

Puede alinear su SVG, etiquetar su imagen alternativa con un nombre de clase ( my-svg-alternate ):

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

Y en CSS, use la clase no-svg de Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) para verificar el soporte de SVG. Si no hay soporte para SVG, se ignorará el bloque SVG y se mostrará la imagen; de lo contrario, la imagen se eliminará del árbol DOM ( display: none ):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

Luego puede cambiar el color de su elemento en línea:

#time-3-icon {
   fill: green;
}

Answer 2

Para cambiar el color de cualquier SVG, puede cambiar directamente el código svg abriendo el archivo svg en cualquier editor de texto . El código puede parecerse al código siguiente

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.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">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

Puedes observar que hay algunas etiquetas XML como ruta, círculo, polígono, etc. Allí puede agregar su propio color con la ayuda del atributo de estilo . Mira el siguiente ejemplo

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Agregue el atributo de estilo a todas las etiquetas para que pueda obtener su SVG del color requerido

Answer 3

Para simplemente cambiar el color de la svg:

Ve al archivo svg y debajo de los estilos, menciona el color en el relleno.

<style>.cls-1{fill:#FFFFFF;}</style>

Answer 4

Puede cambiar la coloración SVG con css si usa algunos trucos. Escribí un pequeño guión para eso.

• ir a través de una lista de elementos que tienen una imagen svg
• cargue el archivo svg como xml
• buscar solo la parte svg
• cambiar el color de la ruta
• reemplazar src con el svg modificado como imagen en línea

$(''img.svg-changeable'').each(function () {
  var $e = $(this);
  var imgURL = $e.prop(''src'');

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

    // change the color
    $svg.find(''path'').attr(''fill'', ''#000'');

    $e.prop(''src'', "data:image/svg+xml;base64," + window.btoa($svg.prop(''outerHTML'')));
  });

});

el código anterior podría no estar funcionando correctamente, lo he implementado para elementos con una imagen de fondo svg que funciona de forma similar a esto. Pero de todos modos, debe modificar esta secuencia de comandos para que se ajuste a su caso. Espero que haya ayudado.

Answer 5

Se agregó una página de prueba: para colorear SVG mediante la configuración de filtro:

filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg) EG filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Cargue y coloree su SVG - Jsfiddle

Tomó la idea de: https://blog.union.io/code/2017/08/10/img-svg-fill/

Answer 6

Si quieres hacer esto en una svg en línea que es, por ejemplo, una imagen de fondo en tu css:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=''http://www.w3.org/2000/svg'' fill=''rgba(31,159,215,1)'' viewBox=''...''/%3E%3C/svg%3E");

por supuesto, reemplace el ... con su código de imagen en línea

Answer 7

la forma más fácil sería crear una fuente a partir de SVG utilizando un servicio como https://icomoon.io/app/#/select o similar. cargue su SVG, haga clic en "generar fuente", incluya archivos de fuentes y CSS en su lado y simplemente utilícelos y péguelos como cualquier otro texto. Siempre lo uso así porque hace que el estilo sea mucho más fácil.

EDITAR: Como se menciona en el article comentado por @ CodeMouse92, las fuentes de los iconos desordenan los lectores de pantalla (y posiblemente sean malos para SEO). Por lo tanto, mejor apéguese a los SVG.

Answer 8

Solo SVG con información de ruta . no se puede hacer eso en la imagen ... como la ruta se puede cambiar y completar la información y listo. como Illustrator

Entonces: a través de CSS puede sobrescribir el valor de fill ruta

path { fill: orange; }

pero si desea una forma más flexible, ya que desea cambiarlo con un texto cuando se está produciendo algún efecto flotante ... use

path { fill: currentcolor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: ''Helvetica'';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}

<div class=''parent''>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>