¿Cómo aplicar un estilo a un SVG incrustado?
Cuando un SVG se incluye directamente en un documento mediante la <svg>etiqueta, puede aplicar estilos CSS al SVG a través de la hoja de estilos del documento. Sin embargo, estoy intentando aplicar un estilo a un SVG que está incrustado (usando la <object>etiqueta).
¿Es posible utilizar algo como el siguiente código?
object svg {
fill: #fff;
}
Respuesta corta: no, ya que los estilos no se aplican a través de los límites del documento.
Sin embargo, como tiene una <object>etiqueta, puede insertar la hoja de estilo en el documento svg mediante un script.
Algo como esto, y tenga en cuenta que este código supone que se <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 <link>elemento 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);
Otra opción más 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 puedes vincular directamente a la hoja de estilo desde el archivo svg, sin realizar ninguna secuencia de comandos. Cualquiera de los siguientes debería 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>
o:
<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: puede usar el complemento jquery-svg para aplicar scripts js y estilos css a un SVG incrustado.
Si la única razón para usar la etiqueta para incluir el SVG es que no desea saturar su código fuente con el marcado del SVG, debería echar un vistazo a los inyectores SVG como SVGInject .
La inyección SVG utiliza Javascript para inyectar un archivo SVG en línea en su documento HTML. Esto permite un código fuente HTML limpio y al mismo tiempo hace que los SVG sean completamente estilizables con CSS. Un ejemplo básico se ve así:
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
