Tengo una página que incluye varios archivos SVG. Para sincronizar el estilo de esos archivos SVG, quería crear una sola hoja de estilo para contener toda la información de estilo.Vinculación a CSS en un SVG incrustado por una etiqueta IMG
Sin embargo, al incluir el SVG como a continuación, el CSS no se aplicará. ¿Alguien tiene una solución a esto o simplemente no es posible vincular a otros archivos (CSS) en un SVG al que hace referencia el <img src="..." />
?
Vea el código de ejemplo a continuación. Al cargar pic.svg
directamente en el navegador, todos los estilos se aplican y se puede ver un rectángulo verde. Pero al abrir page.htm
todo lo que hay que ver es un rectángulo negro. Entonces, obviamente, ninguno de los estilos definidos se aplicó.
page.htm
<!DOCTYPE html>
<html>
<body>
<img src="pic.svg" style="width: 100px; height: 100px;" />
</body>
</html>
pic.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<rect x="10" y="10" width="80" height="80" />
</svg>
styles.css
rect {
stroke: black;
fill: green;
}
EDITAR
De una respuesta, que apareció por un tiempo breve aquí, obtuve this link to the spec y la siguiente cita. ¡En mi opinión, esto indica que el código anterior debería funcionar!
documento SVG autónomo incorporado en un documento HTML o XML con el 'img', 'objeto' (HTML) o 'imagen' (SVG) Elementos
[...]
Citando de su enlace de "las hojas de estilo definidas en cualquier lugar dentro del documento SVG de referencia (en elementos de estilo o atributos de estilo, o en hojas de estilo externas vinculadas con la instrucción de procesamiento de hoja de estilo) aplicará a todo el documento SVG, pero no a ffect el documento de referencia (tal vez HTML o XHTML) ".
Pero en ese caso volvería a tener una definición de estilo por archivo SVG. ¿Y cómo se relaciona eso con el extracto de especificaciones que publiqué? – Sirko
Si desea compartir definiciones de estilo, no puede usar etiquetas de imagen. Los problemas de seguridad tienden a anular los requisitos de especificación que generalmente no consideran tales cosas. –
Aparentemente, esto también significa que no puede hacer referencia a fuentes externas de archivos SVG cargados a través de un archivo HTML. –