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?