2

Tengo una imagen SVG (en un fichero, aunque para efectos prácticos, podría ser inline) y quiero que ocupe todo el espacio del contenedor. Para ello he definido un alto y ancho al div que la contiene, y le he puesto en CSS un ancho y alto de 100% a la imagen:

div {
  width:400px;
  height:200px;
  background:#f0f0f0;
}

div svg {
  width:100%;
  height:100%;
}
<div>
  <svg width="320" height="90" viewBox="0 0 320 90">
    <rect x="0" y="0" width="320" height="90" rx="10" ry="10" fill="#114477" />
  </svg>
</div>

Pero como se puede ver en el ejemplo de arriba, la imagen sólo llega al primer límite que se encuentre (ancho o alto) y, aunque sigue creciendo, no llega a ocupar todo el espacio del contenedor (la imagen no se estira) que es lo que me interesa.

¿Cómo podría conseguir esto?

3 respuestas 3

7

Lo que sucede es que estás intentando deformar la imagen, es decir cambiar el aspecto. Si lo que necesitas es ocupar todo el área simplemente debes proporcionar el valor none al atributo preserveAspectRatio de la marca svg para indicar que quieres modificar la proporción:

<svg ... preserveAspectRatio="none">

Sólo eso necesitas para resolver el problema.

1
  • Hola @JuanManuel. ¡Bienvenido a Stack Overflow en español! Excelente respuesta. Estoy seguro que se vería mucho mejor si pudieses agregarle el código completo. Debajo de tu respuesta está el enlace para editar, y dentro del editor hay que hacer click en el botón "fragmento JavaScript/HTML/CSS"
    – Mariano
    Commented el 18 oct. 2016 a las 6:41
2

div#rectangulo {
  padding:0;
  margin:0;
  width:400px;
  height:200px;
  background:#f0f0f0;
}

div#rectangulo * {
  width:100%;
  height:100%;
}
<div id="rectangulo">
  <svg>
    <rect x="0" y="0"  rx="10" ry="10" fill="#114477" />
  </svg>
</div>

Fíjate en las modificaciones que hice. Tus etiquetas svg y rect contenían valores width y height por lo que sobreescribían los que habías escrito anteriormente.

El id rectangulo para identificar más fácilmente el div al que quieres agregarle esa propiedad

1
  • Esta solución funciona para esta imagen en concreto (que es un ejemplo mínimo), realmente tengo un SVG mucho más complejo (con paths, texto, filtros...) en el que no puedo hacer que todo sea 100% porque no se verá bien. Siento la confusión, debería haber sido más claro.
    – Alvaro Montoro
    Commented el 18 oct. 2016 a las 11:09
2

Esto ocurre porque el width y height del svg no influye en el width y height de la figura mostrada , el alto y ancho de la figura se manipula mediante el atributo viewBox, como desea que se obtenga dichas propiedades del div(contenedor) , bastaría con no colocar este atributo viewBox y añadiéndole alto y ancho al rect de 100%

    div {
  width:400px;
  height:100px;
  background:#f0f0f0;
}

 svg {
  width:100% ;
  height:100% ;
}
<div>
  <svg >
    <rect x="0" y="0" width="100%" height="100%" rx="10" ry="10" fill="#114477" />
  </svg>
</div>

1
  • Esta solución funciona para esta imagen en concreto (que es un ejemplo mínimo), realmente tengo un SVG mucho más complejo (con paths, texto, filtros...) en el que no puedo hacer que todo sea 100% porque no se verá bien. Siento la confusión, debería haber sido más claro.
    – Alvaro Montoro
    Commented el 18 oct. 2016 a las 11:10

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.