Ando aprendiendo SVG y me encuentro haciendo una toolbar. Al hacer zoom, y dependiendo de la configuración del cliente el tamaño varía. Asique por ejemplo si se hace mucho zoom o la resolución de la pantalla es muy pequeña o muy grande va a cambiar el tamaño de la toolbar hasta el punto de que no se vea otra cosa en pantalla.

Lo que quiero es fijar el tamaño para que sea el mismo independientemente de la resolución. Podría setear el tamaño usando viewport y ajustar el tamaño trás hacer zoom a la inversa de la escala para redibujar la toolbar cada vez que se haga zoom, pero me parece una burrada de operaciones y hay que redibujar la toolbar tras cada zoom. En android es horrible como funciona porque no se redibujan los gráficos hasta que sueltas la pantalla y se ve como la toolbar desaparece un cacho hasta que le dejas redibujarse. Es una tontería pero queda muy feo. SVG no se redimensiona como un elemento HTML a pesar de poder manejarlo como tal.

Sabeis como se podría hacer:
-Que la imagen se adapte a la resolución en todo momento. (Importante para que se adapte cuando se gire la pantalla en Android)
-Que siempre ocupe lo mismo ante zooms. (Qué permaneza fija sin aumentar de tamaño)

A ver si me podeis hechar una mano que no consigo hacerlo.

El código:

<div class = "RectangulosFijos">
<svg style ="display: block" width="100%" height="40">
 
<rect width="100%" height="42" style="fill:rgb(0,0,0);stroke-width:2;stroke:rgb(0,0,0)" id="Rectangulo1"
onclick="MatrizRectánguloCirculo();"/>
</svg>
</div>
 
<style>
.RectangulosFijos{
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
</style>

Disculpa, me cuesta explicarlo con palabras.

Quiero por ejemplo el teclado en pantalla del android dibujado con SVG. Yo ahora le doy zoom a la pantalla y veo todo más grande, pero el teclado no se mueve, siempre va a estar estático haga lo que haga en la página. Eso es lo que quiero.

Si le pongo un tamaño fijo, pasa eso con SVG. Pero si le doy zoom, el "teclado" aumenta de tamaño, por lo que me tapa la pantalla y no puedo leer este texto.

Por otro lado, si pongo un tamaño fijo, por ejemplo 40px. Consigo ese efecto. Pero si lo veo en Pc resolución alta se ve super pequeño, y si lo veo en un android con 320x128 de resolución solo veo el "teclaod encima de la página.


A ver si con ese ejemplo me expliqué mejor. Puse el SVG como banner de ejemplo en el segundo link de mi firma. Fíjate que si le das mucho zoom, se tapa la web. (Pincha el svg para cambiarle el color, que está todo negro).

Y si cambias de resolución también pasa lo mismo. Cómo lo puedo fixear? Alguna idea?

http://stringmanolo.byethost12.com

- Mientras tu viewBox sea dinámico/automático también lo será la escalibidad del SVG. Especifica un viewBox y el SVG se mantendrá tal cual:


-- El viewBox especifica el Aspect-Ratio, sirve de máscara y sienta la base para dibujar los elementos del contenidos en el SVG, la medida es en Puntos como si fuera un plano cartesiano. El SVG se adaptará lo más posible a su contenedor manteniendo su aspect-ratio (sin deformarse, salvo que se indique lo contrario), es decir, siempre será width: 100%; height: auto;

- Con eso el SVG será siempre el mismo y no cambiará por más que se cambie el Zoom.

- Con respecto a las vistas horizontal y vertical, el SVG no puede ser el mismo ya que se tendría que deformar, lo mejor es usar un media-query para transformar el SVG o poner otro en su lugar, tal cual pasa con el teclado Android, no es el mismo cuando esta en modo Portrait (vertical) y modo Landspace (horizontal), al menos el mio no XD. A no ser que especifiques el permiso de preserveAspectRatio="none"

Yo creo que no estás considerando el contenedor del SVG. Cuando tu le dices al contenedor de SVG que vaya al 100% del ancho o del alto, le estás diciendo que trabaje con las dimensiones del padre. Si el padre escala, el SVG escala.

Lo que tu quieres hacer creo que tiene más sentido trabajar con vh o vw que con las unidades relativas al contenedor padre.

- Pero ese banner no es SVG, ni se ajusta a lo que has pedido al principio, si hago zoom se amplia y reduce también

- Me parece que no estás poniendo la etiqueta meta viewport para que funcione correctamente en dispositivos móviles. Cuando llega a casa lo pruebo en un móvil y hago las capturas ...