Trabajando con SVG

[Gelito]

Hola a todos.
Les pido ayuda porque he llegado a un punto del que no encuentro salida, estoy bloqueado. Les cuento:

Me puse a trabajar con SVG y no me ha ido mal (en lineas generales...) Desde PHP genero un árbol genealógico a partir de los datos de personas y relaciones de la base de datos.
El problema es que, como es lógico, el árbol excede el tamaño de la pantalla y quiero que se ocupe la pantalla y el resto del arbol esté oculto y aparezca cuando se mueva el árbol.
He buscado información sobre viewport y viewBox y aparantemente está claro. Tengo éste codigo:

Código HTML:

<div id='GraficoArbol' class='centrado' width=1920 height=810>
    <svg id='graficosvg' overflow='hidden' width='28380' height='720' viewBox='0 0 28380 720'>
...
...
    </svg>
</div>
 

Y el árbol me aparece extendido hacia la derecha hasta los 28000 pixeles.

Si cambio a viewBox='0 0 1920 720' me muestra todo al árbol, minimizado, en los 1920 pixeles de la pantalla.

Alguien puede aclararme qué no he entendido del concepto viewBox ??

Tambien quiero poder cambiar el tamaño del árbol con la rueda del mouse y poder imprimirlo, pero eso lo abordaré más adelante...
Cada cosa a su tiempo.

Gacias por adelantado.

[caricatos]

Hola:

También deberías usar el atributo preserveAspectRatio...

Saludos

[Gelito]

Gracias, caricatos
Utilizando el preserveAspectRatio he avanzado en la gestión del svg, aunque para fijarlo en la ventana sólo he necesitado poner overflow:hidden al div padre. (GraficoArbol).

Ya he conseguido que el árbol se desplace con las teclas del cursor (actualizando el viewbox) y, después de pelearme con las diferencias entre navegadores, capturo el evento wheel del mouse y según el sentido de la rueda actualizo el currentScale del svg para cambiar el tamaño del svg.
Pero... cambiar el currentScale no tiene efecto más que en IE !!!

Leo en el MDN de mozilla que "Los atributos DOM currentScale y currentTranslate están implementados pero no existe una interfaz de usuario para pan ni zoom.".

O sea, que en Mozilla esto no sirve y supongo que, por el mismo motivo, en Opera y Chrome tampoco (lo he probado en los tres..)

Se os ocurre otra forma de reducir o ampliar el svg?
Me molestaría mucho tener que recomendar que se use IE...

[caricatos]

Hola:

Para hacer zoom cambio los valofres del atributo viewBox, con el atributo preserveAspectRatio con el valor "xMidYMid meet".

Puedes usar la regla de tres para obtener valores intermedios y temporizar el resultado final... ejemplo: SVG: Zoom en mapa de imagen

Saludos

[Gelito]

Gracias de nuevo, caricatos.
Has vuelto a darme la solución: ya gestiono correctamente también el zoom.

Hay otro asunto sobre el no encuentro información por ningún lado: cómo exportar la imagen del svg a cualquier formato de imagen.
Aunque el objetivo es imprimirlo, no se trata necesariamente de incorporarlo como funcionalidad de la página, pero si me gustaría imprimir aunque sea pasando por un fichero de imagen intermedio.

Sólo encuentro referencias a manejar archivos generados externamente, exportar e importar en Illustrator o similares, pero nada de exportar desde la página web un svg generado dinamicamente en html.
Conoces algún modo de hacerlo?

P.D. Prometo no seguir abusando...

[caricatos]

Hola:

Con polígonos sencillos es fácil exportar usando GD; y también existen instrucciones en canvas: Polígonos: svg vs. canvas, y métodos para generar mapa de bits.

Saludos

[Gelito]

Gracias, caricatos.

He estado mirando GD y tu articulo sobre poligonos y entiendo que se puede crear la imagen con los comandos de GD, pero no es eso lo que necesito.

Genero, desde PHP, con su CSS, el html con un svg del arbol genealógico (a partir de los datos de personas y relaciones de la base de datos).
Si lo he entendido bien con GD se puede generar la imagen y exportarla, pero eso me obligaría a duplicar todo el proceso de generación para que se generase tambien con instrucciones GD. Y tendría que incorporar ahí también todas las caracteristicas de css.

Esto me desanima...

Mi sueño sería poder transformar el html <svg> en imagen de alguna forma, pero me temo que se va a quedar en eso, ... un sueño.

Saludos.

P.D.: Cada vez me gusta más tu diario.