Vinculación a CSS en un SVG incrustado por una etiqueta IMG

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) ".

Fuente

2012-09-25 Sirko

Por motivos de privacidad, las imágenes deben ser archivos independientes. Puede usar CSS si codifica la hoja de estilo como uri de datos. P.ej.

<?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="data:text/css;charset=utf-8;base64,cmVjdCB7IA0KICAgIHN0cm9rZTogYmxhY2s7DQogICAgZmlsbDogZ3JlZW47DQp9" ?> 
<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>

Existen varios online converters para URI de datos.

Fuente

2012-09-25 15:09:37

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. –

Una alternativa es el uso de la etiqueta <object> en su html: -

<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>

Es una pena GRANDE <img> la etiqueta no funcionará. No quiero meterme en la piratería al convertir el SVG a un URI de datos. Tiene que ver con las vulnerabilidades entre sitios en la carga indirecta de recursos y el uso de un "redireccionador abierto".

Tenga en cuenta que en mi prueba de anoche, el método de etiqueta <img> funciona en IE10, pero ni Chrome ni Firefox.

No sé por qué <object> está permitido y <img> no lo está. ¿Un descuido?

Fuente

2013-08-23 09:24:14

Sin supervisión, se trata de lo que la gente espera de las capacidades de una imagen, es decir, lo que ve es lo que es cada vez. Sin embargo, la etiqueta de objeto siempre ha permitido contenido complejo de secuencias de comandos. –

Me encanta esta respuesta, ¡conseguir una fuente para mostrar en mi SVG me ha estado volviendo loco todo el día! ¡Gracias! ... sin embargo, como lo escribiste, rompió el resto de mi HTML hasta que lo cerré como 'height =" 100 ">' necesitaba una etiqueta de objeto de cierre por alguna razón: http://scrabblehack.com/ –

Leon: Gracias. He actualizado el ejemplo en consecuencia. –

Vinculación a CSS en un SVG incrustado por una etiqueta IMG

Respuesta

Cuestiones relacionadas