2

Tengo el siguiente problema.

Tengo una etiqueta SVG donde creo un polígono con su viewBox definido. La cuestión es que al introducirlo de esta manera, no me deja definirle el ancho y alto en css, la imagen mantiene su relación de aspecto. Necesito que mantenga un height fijo, y el width se mantenga al 100% con respecto a la pantalla. Alguna idea?

En este ejemplo exagero un poco las dimensiones para que noten que el polígono no se deforma:

<svg 
  style='width: 100px; height: 200px'
  viewBox='0 0 200 70'
>
   <polygon points='0,0 200,0 200,50 0,70' fill='#000'/>
</svg> 

1
  • ¿De casualidad ocupaste el width: auto; para que tome automáticamente el ancho de la pantalla?
    – Synay
    Commented el 12 ago. a las 16:21

1 respuesta 1

4

seria agregar width al 100% y preserveaspectratio="none" despues de viewBox='0 0 200 70'

algo asi:

<svg 
      style='width: 100%; height: 200px;' 
      viewBox='0 0 200 70'
      preserveAspectRatio='none'
    >
      <polygon points='0,0 200,0 200,50 0,70' fill='#000'/>
    </svg>

1
  • Perfecto amigo! Muchas gracias. Una solución temporal que yo habia aplicado es usar ese svg en una etiqueta <img>, pero no me era muy útil, ya que ese svg necesitaba que fuera dinámico, desconocía ese atributo, thanks! Commented el 17 ago. a las 6:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.