La vinculación a la CSS en un archivo SVG incrustado por una etiqueta IMG

Tengo una página, que incluye varios archivos SVG. Para sincronizar el estilo de los archivos SVG quería crear una sola hoja de estilos para contener toda la información del estilo.

Sin embargo, cuando se incluyen los SVG, como el de abajo, el CSS no se aplican. Nadie tiene una solución para esto o es simplemente no es posible vincular a otros (CSS) archivos SVG que se hace referencia por <img src="..." />?

Ver el siguiente ejemplo de código. Cuando la carga de 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 para ver es un rectángulo negro. Así que, obviamente, ninguno de los estilos definidos se aplica.

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 por un corto tiempo apareció aquí, tengo en este enlace a la especificación y la siguiente cita. En mi opinión, los estados, que el código anterior debe trabajar!

Independiente SVG documento incrustado en un documento HTML o XML con el ‘img’, ‘objeto’ (HTML) o ‘imagen’ (SVG) elementos

[…]

Citando desde el enlace de «hojas de Estilo se define en cualquier lugar dentro de la que se hace referencia documento SVG (en el estilo de los elementos o atributos de estilo, o en hojas de estilo externas vinculadas con la hoja de estilo de la instrucción de procesamiento) se aplican en todo el documento SVG, pero no afectan a la referencia del documento (quizás HTML o XHTML).»

OriginalEl autor Sirko | 2012-09-25

3 Kommentare

  1. 17

    Una alternativa es el uso de la <object> etiqueta en el código html :-

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

    Es una GRAN vergüenza la <img> etiqueta no funciona. Yo no quiero lío sobre la piratería con la conversión de la SVG datos URI. Tienen que ver con las de cross-site vulnerabilidades indirectamente a la carga de recursos y el uso de un «Abrir Redirector».

    Nota que en mis pruebas lastnight, el <img> etiqueta método de trabajo en IE10, pero ni Chrome ni FireFox.

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

    Sin supervisión, es acerca de lo que la gente en general se espera de las capacidades de una imagen, es decir, lo que ves es lo que es todo el tiempo. La etiqueta de objeto siempre ha permitido para secuencias de comandos complejas de contenido, aunque.
    Me encanta esta respuesta mejor, conseguir una fuente se mostrará en mi SVG ha estado conduciendo me encanta todo el día! Gracias! … sin embargo, como usted lo escribió, él rompió el resto de mi HTML hasta que cerró como » height=»100″></object>` necesitaba un cierre de etiqueta de objeto por alguna razón: scrabblehack.com
    Leon:Gracias. He actualizado el ejemplo en consecuencia.
    las expectativas de una imagen»… no me parece muy conveniente ignorar el sinnúmero de otras formas en que las imágenes cambian de forma dinámica. A partir de la experiencia del usuario, la percepción es la realidad. Una imagen cambiante a través de un efecto de hover es la misma experiencia de usuario que estamos cambiando la imagen de origen, o si el efecto de hover se logra a través de CSS dentro de la SVG. Por qué CSS no es compatible con el formato SVG fuera de las etiquetas object es más allá de mí…
    Yo debería haber sido más claro, pero estaba tratando de mantenerlo corto. SVG no de soporte de hojas de estilo externas, cuando se utiliza en un object (al menos en Firefox y Chrome; estoy buscando es en de ahora), pero no dentro de otras aplicaciones. En un perfecto/mundo lógico, nos gustaría ser capaces de utilizar una hoja de estilo externa con cualquier forma de SVG, no sólo dentro de un objeto. Un img etiqueta soporta gifs animados e incluso generado dinámicamente archivos php (con encabezados de la imagen). No hay ninguna razón por la que no debería apoyar un SVG con una hoja de estilo externa.

    OriginalEl autor David Kerr

  2. 10

    Por razones de privacidad de las imágenes debe ser independiente de los archivos. Puedes usar CSS si codifica la hoja de datos de uri. E. g.

    <?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 de datos de URIs.

    Pero en ese caso yo tendría de nuevo una definición de estilo por archivo SVG. Y ¿cómo se relaciona esto con la especificación extracto que he publicado?
    Si desea compartir definiciones de estilo no puede usar las etiquetas de imagen. Los problemas de seguridad tienden a anular la especificación de los requisitos que, en general, no considerar tales cosas.
    Al parecer, esto también significa que usted no puede referirse a fuentes externas de archivos SVG cargado a través de un archivo HTML.
    Si el externo SVG se hace referencia de una <img> etiqueta, a continuación, usted tendría que incorporar la fuente de datos en el archivo SVG, como datos de URI. Si no se incluye como una imagen, es decir, utilizar a través de <object> a continuación, puede utilizar fuentes externas bien. Si desea más detalles, como una cuestión separada.

    OriginalEl autor Robert Longson

  3. 0

    Las respuestas anteriores son grandes. He encontrado que la manera más sencilla, aunque, a sólo integrar la cruda SVG propia etiqueta en mi página web. Esto permitió que el SVG para heredar font-family estilos declarados en mi página de CSS sin problema…

    OriginalEl autor duhaime

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea