html - insertar - Enlace a CSS en un SVG incrustado por una etiqueta IMG
svg source (3)
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.
Sin embargo, cuando se incluye el SVG como a continuación, el CSS no se aplicará. ¿Alguien tiene una solución para esto o simplemente no es posible vincular a otros archivos (CSS) en un SVG referenciado por <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. Así que obviamente ninguno de los estilos definidos fue aplicado.
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>
estilos.css
rect {
stroke: black;
fill: green;
}
EDITAR
De una respuesta, que apareció aquí por un corto tiempo, obtuve este enlace a la especificación y la siguiente cita. En mi opinión, esto indica que el código anterior debería funcionar.
Documento SVG independiente incrustado en un documento HTML o XML con los elementos ''img'', ''objeto'' (HTML) o ''imagen'' (SVG)
[...]
Las citas de su enlace "Las hojas de estilo definidas en cualquier lugar dentro del documento SVG al que se hace referencia (en elementos de estilo o atributos de estilo, o en las hojas de estilo externas vinculadas con la instrucción de procesamiento de la hoja de estilo ) se aplican a todo el documento SVG , pero no afectan al documento de referencia ( quizás HTML o XHTML) ".
Las respuestas de arriba son geniales. Sin embargo, me pareció más simple simplemente incrustar la etiqueta SVG sin procesar en mi página web. Esto permitió que SVG heredara los estilos de familia de fuentes declarados en el CSS de mi página sin problema ...
Por razones de privacidad, las imágenes deben ser archivos independientes. Puede usar CSS si codifica la hoja de estilo como un 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>
Hay varios convertidores en línea para URI de datos.
Una alternativa es usar la etiqueta <object> en su html: -
<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>
Es una gran pena que la etiqueta <img> no funcione. No quiero meterme en la trampa de convertir el SVG en un URI de datos. Tiene que ver con las vulnerabilidades entre sitios en la carga indirecta de recursos y el uso de un "Redirector Abierto".
Tenga en cuenta que en mi última noche de pruebas, el método de etiqueta <img> NO funciona en IE10, pero ni Chrome ni FireFox.
No sé por qué se permite <object> y <img> no. ¿Un descuido?