css - imagen - open iconic change color

¿Puedo cambiar el color de relleno de una ruta svg con CSS?

Question

Tengo el siguiente código:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

¿Es posible cambiar el color de relleno de la ruta SVG con CSS u otro medio sin cambiarlo realmente dentro de la etiqueta de ruta?

Answer 1

Encontré un recurso increíble en css-tricks: https://css-tricks.com/using-svg/

Hay un puñado de soluciones explicadas allí.

Preferí el que requería ediciones mínimas para el svg fuente, y tampoco requería que se incrustara en el documento html. Esta opción utiliza la etiqueta <object> .

Agregue el archivo svg en su html usando <object> ; También declare los atributos html width y height . Usando estos valores de ancho y alto el documento svg no se escala, trabajé alrededor de eso usando una declaración css transform: scale(...) para la etiqueta svg en mi archivo svg css asociado.

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

Crea un archivo css para adjuntar a tu documento svn. Mi ruta svg de fuente fue escalada a 16px, la incrementé a 64 con un factor de cuatro. Solo tenía una ruta, así que no tuve que seleccionarla más específicamente, sin embargo, la ruta tenía un atributo de relleno, así que tuve que usarla !IMPORTANT forzar al css a tomar precedente.

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

Edite su archivo svg objetivo, antes de la etiqueta <svg apertura, para incluir una hoja de estilo; Tenga en cuenta que el href es relativo a la url del archivo svg.

<?xml-stylesheet type="text/css" href="myfile.css" ?>

Answer 2

Sí, puede aplicar CSS a SVG, pero debe hacer coincidir el elemento, del mismo modo que al diseñar HTML. Si solo desea aplicarlo a todas las rutas SVG, podría usar, por ejemplo:

​path {
    fill: blue;
}​

El CSS externo parece anular el atributo de fill la ruta, al menos en los navegadores WebKit y Gecko que probé. Por supuesto, si escribe, por ejemplo, <path style="fill: green"> , eso también anulará el CSS externo.

Answer 3

Si ingresa al código fuente de un archivo SVG, puede cambiar el relleno de color modificando la propiedad de relleno.

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg> 

Use su editor de texto favorito, abra el archivo SVG y juegue con él.

Answer 4

si desea cambiar el color al colocar el elemento en su sitio, intente esto:

path:hover{
  fill:red;
}

Answer 5

usted pone este CSS para svg circle.

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}