Pregunta

Estoy creando una aplicación web destinada a cargarse en el canal de Internet Wii, que es esencialmente Opera 9.3.

Tiene apoyo para SVG, pero no parecen escalar. Los gráficos siempre funcionan en sus tamaños "óptimos", sin importar el ancho y la altura.

Si establecí la altura/ancho con CSS, el espacio que el elemento de imagen toma en la página cambia, pero el gráfico SVG aún se vuelve detrás de todo (sin posicionamiento o conjunto de índices Z).

Si configuro la altura/ancho a través de los atributos de la etiqueta, la imagen simplemente se recorta para que se ajuste a esas dimensiones.

¿Existe un método alternativo para escalar SVG, que podría ser compatible con el canal de Internet Wii?

Editar: Parece depender de SVG. Por ejemplo, este SVG puede escalar a lo que haya establecido:

<img src="http://www.w3.org/Graphics/SVG/Test/20061213/svggen/fonts-elem-01-t.svg" width="200" />

Mientras que este SVG parece estar arreglado:

<img src="http://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg" width="200" />

¿Alguna idea sobre las diferencias entre estos dos?

¿Fue útil?

Solución

¡Me lo imaginé! Tiene que ver con la etiqueta SVG inicial dentro del archivo SVG y sus parámetros.

Inicialmente, el SVG que no estaba escalando tenía esto para la etiqueta SVG:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1063" height="638">

Tendrás que desplazarte a la derecha, pero notarás que no hay viewBox atributo. Si agrego un viewBox Atributo, especificando el tamaño óptimo completo del SVG (como se especifica por los atributos de ancho y altura), ¡la Wii lo escalará correctamente!

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1063" height="638" viewBox="0 0 1063 638">
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top