Cómo el estilo de SVG con CSS externo?

Tengo varios gráficos SVG me gustaría modificar los colores a través de mi hojas de estilo externas – no directamente dentro de cada archivo SVG. Yo no voy a poner los gráficos en línea, pero guardar en mi carpeta de imágenes y apuntando hacia ellos.

He implementado de esta manera para permitir que la información sobre herramientas para el trabajo, y yo también envueltos cada uno en un <a> etiqueta para permitir un enlace.

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

Y aquí está el código de los gráficos SVG:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!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" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

Pongo el siguiente en mi archivo CSS externo (principal.css):

.socIcon g {fill:red;}

Aún no tiene ningún efecto en el gráfico. Yo también lo intentó .socIcon g ruta de acceso {} y .socIcon camino {}.

Que algo no está bien, tal vez mi aplicación no permite CSS externo modificaciones, o me perdí de un paso? Agradecería tu ayuda! Solo me falta la capacidad para modificar los colores de los gráficos SVG a través de mi hoja de estilos externa, pero no puedo perder la descripción y el enlace de capacidad. (Yo podría ser capaz de vivir sin la información de herramientas.) Gracias!

Consulte stackoverflow.com/questions/12604095/…
Trate de svg { fill:red; } o dar su camino un nombre de clase. E. g. <path class="socIcon" d="M28.44 ..... /> esto debe hacer el truco.

OriginalEl autor Jordan H | 2013-08-25

11 Kommentare

  1. 65

    Su principal.archivo css sólo tendría un efecto sobre el contenido de la SVG si el archivo SVG se incluye en línea en el código HTML:

    https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

    <html>
      <body>
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
        <g>
          <path d="M28.44......./>
        </g>
      </svg>
    </html>

    Si quieres mantener tu SVG en los archivos, la CSS debe ser definido dentro de un archivo SVG.

    Usted puede hacerlo con una etiqueta de estilo:

    http://www.w3.org/TR/SVG/styling.html#StyleElementExample

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="50px" height="50px" viewBox="0 0 50 50">
      <defs>
        <style type="text/css"><![CDATA[
          .socIcon g {
            fill:red;
          }
        ]]></style>
      </defs>
      <g>
        <path d="M28.44......./>
      </g>
    </svg>

    Puede utilizar una herramienta en el lado del servidor para actualizar la etiqueta de estilo dependiendo del estilo activo. En ruby podría lograr esta con Nokogiri. SVG es sólo XML. Por lo que hay probablemente muchos de los XML de bibliotecas que probablemente puede lograr esto.

    Si no eres capaz de hacer eso, usted tendrá sólo tiene que utilizar como si fueran archivos Png; la creación de un conjunto para cada estilo, y el ahorro de sus estilos en línea.

    ¿Significa esto que no hay ningún método para beneficio de la caché de la SVG y la aplicación de variado estilo? En línea parece que no caché bien, mientras que otros métodos requieren de la creación de muchas versiones de la imagen, eliminando cualquier beneficio de la caché de ellos.
    He intentado seguir esta solución, pero tengo algunas en línea de animación css que no está trabajando en los gráficos SVG. Esta es una limitación de esta técnica? Me pueden orientar el camino se llena de css en línea igual de bien, aunque la animación css no parece funcionar.
    EDIT: no importa, acabo de descubrir que los archivos SVG tienen su propio ‘especial’ css (de relleno y de trazo – no se puede encontrar mucho más que es compatible)
    Otra forma es codificar el SVGs como background-image data uris, con diferentes colores en cada versión y se basan en la compresión para reducir el tamaño del archivo, debido a la duplicación de esfuerzos.

    OriginalEl autor RGB

  2. 35

    Usted puede hacer lo que desee, con una (importante) advertencia: los caminos dentro de su símbolo no puede ser de estilo de forma independiente a través de la CSS externa, que sólo se puede establecer las propiedades del símbolo entero con este método. Por lo tanto, si usted tiene dos caminos en su símbolo y queremos que ellos tienen diferentes colores de relleno, esto no funcionará, pero si usted desea que todas las rutas de acceso a la misma, esto debería funcionar.

    En el archivo html, quieres algo como esto:

    <style>
      .fill-red { fill: red; }
      .fill-blue { fill: blue; }
    </style>
    
    <a href="//www.example.com/">
      <svg class="fill-red">
        <use xlink:href="images/icons.svg#example"></use>
      </svg>
    </a>

    Y externa en el archivo SVG quieres algo como esto:

    <svg xmlns="http://www.w3.org/2000/svg">
       <symbol id="example" viewBox="0 0 256 256">
        <path d="M120.... />
      </symbol>
    </svg>

    De intercambio de la clase en el svg etiqueta (en html) de fill-red a fill-blue y ta-da… de color azul en lugar de rojo.

    Que en parte puede conseguir alrededor de la limitación de ser capaces de identificar los caminos por separado con CSS externo mezclando y emparejando el CSS externo con algunos en la línea de CSS en rutas específicas, desde la línea de CSS tendrá prioridad. Este enfoque de trabajo si estás haciendo algo así como un icono blanco contra un fondo de color, en la que desea cambiar el color del fondo a través de la CSS externo, pero el icono de sí mismo es siempre blanco (o viceversa). Así, con el mismo código HTML como antes y algo como esto svg código, usted obtendrá un fondo rojo y un blanco de primer plano de la ruta:

    <svg xmlns="http://www.w3.org/2000/svg">
      <symbol id="example" viewBox="0 0 256 256">
        <path class="background" d="M120..." />
        <path class="icon" style="fill: white;" d="M20..." />
      </symbol>
    </svg>
    buena respuesta.. creo que la advertencia de que en realidad debería ser: Compatibilidad del Navegador, aunque! buena referencia (para más detalle de caniuse): css-tricks.com/svg-fragment-identifiers-work
    Compatibilidad del navegador: caniuse.com/#feat=svg-fragment

    OriginalEl autor Adam Korman

  3. 5

    Es posible que el estilo de un SVG de forma dinámica la creación de un elemento de estilo en JavaScript y anexarlo a la SVG elemento. Chapucero pero funciona.

    <object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg">
        Your browser does not support SVG
    </object>
    <script>
        var svgHolder = document.querySelector('object#dynamic-svg');
        svgHolder.onload = function () {
            var svgDocument = svgHolder.contentDocument;
            var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");
    
            //Now (ab)use the @import directive to load make the browser load our css
            style.textContent = '@import url("/css/your-dynamic-css.css");';
    
            var svgElem = svgDocument.querySelector('svg');
            svgElem.insertBefore(style, svgElem.firstChild);
        };
    </script>

    Que podría generar el JavaScript de forma dinámica en PHP si quieres – el hecho de que esto es posible en JavaScript abre un sinfín de posibilidades.

    hola en realidad me gusta la solución y funciona, pero tengo que adoptar en mi situtation si usted está dispuesto a ayudar os supuesto , tengo dentro de <defs> un estilo de etiqueta que puede eliminar de forma manual y ejecutar este código para crear un estilo , es que hay una forma de eliminar el defs volver a crear el elemento como el que usted hizo o simplemente actualizarla , y también la url de un error de url no está definido puede usted por favor ayuda , gracias

    OriginalEl autor Pete

  4. 4

    Un enfoque que usted puede tomar es usar filtros CSS para cambiar la apariencia de los gráficos SVG en el navegador.

    Por ejemplo, si usted tiene un SVG gráfico que utiliza un color de relleno de color rojo dentro de la SVG código, se puede recurrir morado con un hue-gire el ajuste de 180 grados:

    #theIdOfTheImgTagWithTheSVGInIt {
        filter: hue-rotate(180deg);
        -webkit-filter: hue-rotate(180deg);
        -moz-filter: hue-rotate(180deg);
        -o-filter: hue-rotate(180deg);
        -ms-filter: hue-rotate(180deg);
    }

    Experimento con otro tono-configuración de rotación para encontrar los colores que desee.

    Para ser claros, el de arriba CSS va en el CSS que se aplica a un documento HTML. Usted es el estilo de la etiqueta img en el código HTML, no de estilo de el código de la SVG.

    Y tenga en cuenta que esto no funciona con los gráficos que tiene un relleno de color negro o blanco o gris. Usted tiene que tener un color real en el que hay que girar el matiz de ese color.

    OriginalEl autor Simon White

  5. 3

    Debería ser posible hacer por primera inline externo imágenes svg. Mira aquí por ejemplo:

    Reemplace Todas las Imágenes Svg en línea Con Svg | JAVASCRIPT | Fragmento de Código de la Biblioteca por Jess Frazelle

    esto es una cosa hermosa, gracias
    es importat tener en cuenta que esto sólo funciona si usted tiene la imagen alojada en el mismo dominio que el html, tiene una especialmente configurado crossdomain de política en el servidor de imágenes. $.obtener el uso de ajax y no se carga la imagen desde un servidor externo si no hay válido permitir el acceso de encabezado

    OriginalEl autor Leo

  6. 2

    Cuando se utiliza en un <image> etiqueta SVG debe estar contenida en un solo archivo por razones de privacidad. Este el error bugzilla tiene más detalles sobre exactamente por qué esto es así. Desafortunadamente, usted no puede utilizar una etiqueta diferente como un <iframe> debido a que no funciona como un enlace, así que tendrá que integrar el CSS en un <style> etiqueta dentro del propio archivo.

    Otra forma de hacer esto sería tener el SVG de datos dentro del archivo html principal es decir

    <a href='http://youtube.com/...' target='_blank'>
      <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
        <g>
            <path d="M28.44......./>
        </g>
      </svg>
    </a>

    Podría estilo que con un archivo CSS externo utilizando el código HTML <link> etiqueta.

    No puedo poner los estilos dentro de los archivos. Estoy realmente va a cambiar los colores de estas imágenes basado en lo que el esquema de color que el usuario ha elegido para mi sitio. Mi aplicación actual es añadir una hoja de estilos a la página principal que sobrescribe los estilos por defecto. Yo quería poner los cambios de color en el archivo a afectar a la incrustados gráficos SVG. Pero eso no iba a trabajar porque tengo que enlace a la hoja de estilos en el archivo SVG (a menos que haya una manera de agregar que enlace a todos los archivos SVG con JavaScript). Seguramente hay una manera para permitir externo archivos SVG, CSS externos, enlaces, y la información sobre herramientas.
    No es posible hacer lo que quieres hacer, porque de la seguridad del navegador de modelo. Usted no puede usar javascript para manipular SVG cuando se utiliza como una imagen. Pensar en SVG cuando se utiliza como una imagen como una película de dibujos animados, png o gif, todas en un solo archivo y no de secuencias de comandos de acceso.

    OriginalEl autor Robert Longson

  7. 2

    Una solución muy rápida para tener estilo dinámico con una hoja de estilo css externos, en el caso de usar la <object> etiqueta para incrustar el archivo svg.

    Este ejemplo agregar una clase a la raíz <svg> etiqueta haga clic en el elemento padre.

    archivo.svg :

    <?xml-stylesheet type="text/css" href="../svg.css"?>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="">
      <g>
       <path/>
      </g>
     </svg>

    html :

    <a class="parent">
      <object data="file.svg"></object>
    </a>

    Jquery :

    $(function() {
      $(document).on('click', '.parent', function(){
        $(this).find('object').contents().find('svg').attr("class","selected");
      }
    });

    haga clic en elemento primario :

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">

    entonces usted puede manejar su css

    svg.css :

    path {
     fill:none;
     stroke:#000;
     stroke-miterlimit:1.41;
     stroke-width:0.7px;
    }
    
    .selected path {
     fill:none;
     stroke:rgb(64, 136, 209);
     stroke-miterlimit:1.41;
     stroke-width:0.7px;
    }
    parece que no funciona, puede agregar un ejemplo de trabajo?

    OriginalEl autor vhanahrni

  8. 1

    «Estoy realmente va a cambiar los colores de estas imágenes basado en lo que el esquema de color que el usuario ha elegido para mi sitio».Jordan 10 horas atrás

    Sugiero usar PHP para esto. Realmente no hay una mejor manera de hacer esto sin el icono de las fuentes, y si resisten el uso de ellos, usted podría intentar esto:

    <?php
    
        header('Content-Type: image/svg+xml');
        echo '<?xml version="1.0" encoding="utf-8"?>';
        $color = $_GET['color'];
    
    ?>
    <!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" viewBox="0 0 56.69 56.69">
        <g>
            <path fill="<?php echo $color; ?>" d="M28.44..."/>
        </g>
    </svg>

    Y más tarde puede utilizar este archivo como filename.php?color=#ffffff para obtener el archivo svg en el color deseado.

    Tenga en cuenta que este código no verificación de entrada de usuario – cualquier cosa puede ser suministrado como el color y su SVG se podría representar de formas muy interesantes… No estoy seguro si afecta a usted, pero usted debe hacer un hábito de SIEMPRE validar la entrada del usuario. Algo como esto podría ayudar a: if (!preg_match('/^[#][0-9a-f]{6}$/i', $_GET['color'])) die('Oops!'); (ponerlo en algún lugar en el comienzo del bloque en PHP).

    OriginalEl autor SeinopSys

  9. 1

    Lo que funciona para mí: la etiqueta de estilo con @import regla

    <defs>
        <style type="text/css">
            @import url("svg-common.css");
        </style>
    </defs>

    OriginalEl autor Fordi

  10. 1

    Sé que es un viejo post, pero sólo para aclarar este problema… solo que usando sus clases en el lugar equivocado 😀

    Primero de todos usted podría utilizar

    svg { fill: red; }

    en su main.css para obtener de color rojo. Esto no tiene efecto. Usted podría probablemente el nodo de uso de los selectores así conseguir específico pathes.

    Segunda cosa es, que declaired la clase a la img-Tag.

    <img class='socIcon'....

    Usted realmente debe declair dentro de su SVG. si usted tiene diferentes pathes puede definir más de un curso.

    <?xml version="1.0" encoding="utf-8"?>
    <?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
    <!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" viewBox="0 0 56.69 56.69">
    <g>
        <path class="myClassForMyPath" d="M28.44......./>
    </g>
    </svg>

    ahora usted puede cambiar el color en su main.css como

    .myClassForMyPath {
        fill: yellow;
    }

    OriginalEl autor Dwza

  11. -1

    Este método funcionará si el svg es visto dentro de un navegador web, pero tan pronto como este código se carga en el servidor y la clase para el svg icono está codificado como si fuera una imagen de fondo, el color se pierde y trasera al color predeterminado. Parece que el color no se puede cambiar desde la hoja de estilos externa a pesar de que tanto el svg de la clase para el color y la capa superior de la clase para la visualización y la posición de la svg ambos son asignadas en el mismo directorio.

    OriginalEl autor HTMLGUY1999

Kommentieren Sie den Artikel

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

Pruebas en línea