elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  SVG responsive?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: SVG responsive?  (Leído 1,951 veces)
@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


Turn off the red ligth


Ver Perfil WWW
SVG responsive?
« en: 23 Agosto 2019, 03:36 am »

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:
Código
  1. <div class = "RectangulosFijos">
  2. <svg style ="display: block" width="100%" height="40">
  3.  
  4. <rect width="100%" height="42" style="fill:rgb(0,0,0);stroke-width:2;stroke:rgb(0,0,0)" id="Rectangulo1"
  5. onclick="MatrizRectánguloCirculo();"/>
  6. </svg>
  7. </div>
  8.  
  9. <style>
  10. .RectangulosFijos{
  11. position: fixed;
  12. left: 0;
  13. right: 0;
  14. bottom: 0;
  15. }
  16. </style>


En línea

EdePC
Moderador Global
***
Conectado Conectado

Mensajes: 1.751



Ver Perfil
Re: SVG responsive?
« Respuesta #1 en: 23 Agosto 2019, 15:43 pm »

Saludos,

Citar
-Que la imagen se adapte a la resolución en todo momento. (Importante para que se adapte cuando se gire la pantalla en Android)

- Esto no lo comprendo bien, los SVG por naturaleza son Responsive, mantienen su Aspect Ratio y ocupan todo lo que pueden de su contenedor pudiendo desbordarse.


Citar
-Que siempre ocupe lo mismo ante zooms. (Qué permaneza fija sin aumentar de tamaño)

- Los SVG siempre ocupan lo mismo sin importar el Zoom, a no ser que modifiques los estilos de su contenedor.


- Me parece que quieres una barra de botones o algo así, para esto mejor usar flexbox y/o grid, ya que los contenidos de estos son bastante fluidos y se adaptan dinámicamente a su contenedor. Un SVG en contra no puede deformarse o perder su Aspec Ratio, aunque existe la opción, no suele ser buena idea deformar, estirar, aplastar un SVG salvo que sea el efecto requerido.

- Quizá si ejemplificas algo más ...

- Tienes una forma poco ortodoxa de hacer SVG XD, yo preferiría:

Código
  1. <div class="RectangulosFijos">
  2.  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40">
  3.    <rect x="0" y="0" width="100" height="40" fill="yellow" stroke="red" stroke-width="2" />
  4.  </svg>
  5. </div>
  6. <style>
  7.  body {
  8.    margin: 0;
  9.  }
  10.  .RectangulosFijos {
  11.    position: fixed;
  12.    left: 0;
  13.    right: 0;
  14.    bottom: 0;
  15.  }
  16. </style>
  17.  


En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


Turn off the red ligth


Ver Perfil WWW
Re: SVG responsive?
« Respuesta #2 en: 23 Agosto 2019, 17:12 pm »

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
« Última modificación: 23 Agosto 2019, 17:13 pm por string Manolo » En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.458



Ver Perfil
Re: SVG responsive?
« Respuesta #3 en: 23 Agosto 2019, 17:15 pm »

creo que la solucion (no he probado) seria usarlo con position:fixed a width:100% pero creo que te tocaría igual usar js para pegarlo a un lugar de la pantalla
En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
EdePC
Moderador Global
***
Conectado Conectado

Mensajes: 1.751



Ver Perfil
Re: SVG responsive?
« Respuesta #4 en: 24 Agosto 2019, 16:57 pm »

- 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:

Citar
      <div class="BannerFijadoAbajo">
        <svg viewBox="0 0 100 10">
          <rect width="100" height="10" style="fill:rgb(0,0,0);stroke-width:2;stroke:rgb(0,0,0)" id="Rectangulo2" onclick="CambiarColorRectangulo();"/>
        </svg>
      </div>
      <div class="BannerFijado">
        <svg viewBox="0 0 100 20">
          <g>
            <rect width="100" height="20" style="fill:rgb(0,0,0);stroke-width:2;stroke:rgb(0,0,0)" id="Rectangulo1" onclick="CambiarColorRectangulo();"/>

-- 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"
En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


Turn off the red ligth


Ver Perfil WWW
Re: SVG responsive?
« Respuesta #5 en: 24 Agosto 2019, 18:09 pm »

- 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"
Probé con el código que me muestras y se queda todo centrad en medio, con un tamapo enorme que no se ven ni la letras. Sigue teniendo el problema de que es distinto en cada resolución, entonces no sé para que me sirve?

 Estuve mirando antes de hacer el post y había que manejar matrices y el sistema de coordenadas de viewbox me parece absurdamente complejo. Cuando por ejemplo superas el tamaño del viewbox los elementos se mueven hacia la derecha en vez de agrandarse. Quise dibujar el texto con svg y me fue totlmente imposible dibujar una M. Asique al final use la etiqueta para el texto por ese motivo con el objetivo de crear una ttf.
Puse una de prueba en la carpeta del host y no me la carga.

Vaya rollazo xD.

Buscaré ejemplos ya hechos para ver como lo manejan, porque me da a mi que esto es bastante complejo.
En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.165


I'm fourth.


Ver Perfil WWW
Re: SVG responsive?
« Respuesta #6 en: 24 Agosto 2019, 19:17 pm »

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.
En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


Turn off the red ligth


Ver Perfil WWW
Re: SVG responsive?
« Respuesta #7 en: 24 Agosto 2019, 20:08 pm »

Creo que eso no me lo soluciona Minusfour, porque entonces al viewport le tengo que poner tamaño y estoy en las mismas no? Ya que si se lo pongo fijo al cambiar de resolución se ve distinto.

Mira el banner de este sitio que se activa al bajar el documento. Es eso exactamente lo que busco. Voy a mirar el código a ver si consigo entender como está hecho.

https://davidwalsh.name/building-animated-svg-banners
En línea

EdePC
Moderador Global
***
Conectado Conectado

Mensajes: 1.751



Ver Perfil
Re: SVG responsive?
« Respuesta #8 en: 24 Agosto 2019, 21:05 pm »

- 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 :xD

- 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 ...
En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.165


I'm fourth.


Ver Perfil WWW
Re: SVG responsive?
« Respuesta #9 en: 24 Agosto 2019, 21:40 pm »

Es algo díficil de demostrar como funciona vh y zoom en linea, porque la mayoría de los sitios usan frames de alguna forma u otra. Cuando tu haces zoom con el navegador, el viewport de tu navegador no cambia. Sigue siendo el mismo. El navegador no escala unidades relativas. 50% de un contenedor sigue siendo 50% cuando haces zoom.

Si tu SVG usa unidades absolutas si las escala. Es decir, si tienes un SVG con 500px de alto o 500px de ancho, el navegador escala esas unidades.

Edit:
Mira este es un ejemplo que saque de Mozilla:

Código
  1. <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect -->
  2. <head>
  3. html,body { margin: 0px; }
  4. svg { /*max-width: 50vh;*/ height: 50vh;}
  5. </style>
  6. </head>
  7. <body>
  8. <div>
  9. <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  10.   <!-- Simple rectangle -->
  11.   <rect width="100" height="100" />
  12.   <!-- Rounded corner rectangle -->
  13.   <rect x="120" width="100" height="100" rx="15" />
  14. </svg>
  15. </div>
  16. </body>
  17. </html>

Lo único que hice fue darle un alto de 50vh, puedes hacerle zoom y no le pasa nada al contenedor (esto sin frames). Puedes hacer lo mismo con el % siempre y cuando estés pasando el tamaño del viewport desde la etiqueta HTML (pero para que hacer eso, si puedes usar las unidades de viewport).
« Última modificación: 24 Agosto 2019, 21:49 pm por MinusFour » En línea

Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Versión Responsive...
Sugerencias y dudas sobre el Foro
Kami 5 2,667 Último mensaje 24 Marzo 2014, 06:13 am
por flacc
diseño responsive
Desarrollo Web
kakashi20 3 1,222 Último mensaje 14 Abril 2014, 23:30 pm
por EFEX
Pasar web a responsive
Desarrollo Web
softmel 2 1,135 Último mensaje 10 Febrero 2015, 23:37 pm
por luchi
Texto responsive en BOOTSTRAP 3
Desarrollo Web
Patrick Bateman 3 8,555 Último mensaje 23 Noviembre 2016, 20:08 pm
por #!drvy
una web NO responsive « 1 2 »
Desarrollo Web
Leguim 10 1,664 Último mensaje 5 Junio 2019, 07:49 am
por #!drvy
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines