¿Cómo aplicar un estilo a un SVG incrustado?

Cuando un SVG se incluye directamente en un documento con la etiqueta <svg>, puede aplicar estilos CSS al SVG a través de la hoja de estilo del documento. Sin embargo, estoy tratando de aplicar un estilo a un SVG que está incrustado (usando la etiqueta <object>).¿Cómo aplicar un estilo a un SVG incrustado?

¿Es posible usar algo como el siguiente código?

object svg { 
    fill: #fff; 
}

Fuente

2011-02-05 Joshua Sortino

me ocurrió una manera ligera para hacer esto, que trabajaría grande para lo que está tratando de hacer. Consulte esta pregunta y respuesta: http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement/ –

Respuesta corta: no, ya que los estilos no se aplican a través de los límites del documento.

Sin embargo, como tiene una etiqueta <object>, puede insertar la hoja de estilo en el documento svg mediante script.

Algo como esto, y tenga en cuenta que este código se supone que el <object> ha cargado completamente:

var svgDoc = yourObjectElement.contentDocument; 
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style"); 
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here 
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

También es posible insertar un elemento <link> para hacer referencia a una hoja de estilo externa:

var svgDoc = yourObjectElement.contentDocument; 
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link"); 
linkElm.setAttribute("href", "my-style.css"); 
linkElm.setAttribute("type", "text/css"); 
linkElm.setAttribute("rel", "stylesheet"); 
svgDoc.getElementById("where-to-insert").appendChild(linkElm);

embargo Otra opción es utilizar el primer método para insertar un elemento de estilo y luego agregar una regla @import, por ejemplo, styleElement.textContent = "@import url(my-style.css)".

Por supuesto, también se puede vincular directamente a la hoja de estilo del archivo svg, sin realizar ninguna secuencia de comandos. Cualquiera de lo siguiente debe funcionar:

<?xml version="1.0" encoding="UTF-8"?> 
<?xml-stylesheet href="my-style.css" type="text/css"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
    ... rest of document here ... 
</svg>

<svg xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <link href="my-style.css" type="text/css" rel="stylesheet" 
      xmlns="http://www.w3.org/1999/xhtml"/> 
    </defs> 
    ... rest of document here ... 
</svg>

Actualización 2015: se puede utilizar para aplicar jquery-svg plugin de guiones js y estilos CSS en un SVG incrustado.

Fuente

2011-02-05 11:30:57

¿Es este un método para enlazar? una hoja de estilo externa? Si no, ¿es eso posible? –

Lo anterior inserta un elemento de estilo en svg. Sí, también es posible insertar un elemento de enlace xhtml para vincularlo a una hoja de estilo externa, o posiblemente a una instrucción de procesamiento de hoja de estilo xml (consulte http://www.w3.org/Style/styling-XML.html). –

Esto es bastante impresionante Erik! Sin embargo, no pude lograr que este truco funcione en Chrome sin incluir svgweb: http://code.google.com/p/svgweb/ ... ¿Alguna idea es lo que estoy haciendo mal? –

Puede hacer esto sin javsscrpt colocando un bloque de estilo con sus estilos dentro del archivo SVG mismo.

<style type="text/css"> 
path, 
circle, 
polygon { 
    fill: #fff; 
    } 
</style>

Fuente

2016-05-25 11:43:22

¿Cómo aplicar un estilo a un SVG incrustado?

Respuesta

Cuestiones relacionadas