J'ai une div conteneur qui contient un SVG :
<!DOCTYPE html>
<body>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="200">
<rect x="0" y="0" width="50" height="200" />
</svg>
</div>
</body>Et le CSS suivant :
svg
{
width: 100%;
height: 100%;
}
div.container
{
width: 100%;
background-color: red;
}Dans firefox, chrome etc. la div conteneur correspondra à la hauteur du svg. Cependant, ce n'est pas le cas pour IE (je l'ai testé dans IE9). La suppression de width/height : 100% du bloc de style svg résoudra le problème, mais j'ai besoin de ces styles pour mettre à l'échelle mon SVG (j'ai omis preserveAspectRatio dans l'élément SVG de cet exemple jsfiddle).
Voici le jsfiddle : http://jsfiddle.net/Cx5jR/
Je pensais utiliser zoom:1 pour forcer IE à reconnaître hasLayout sur l'élément div, mais cela n'a pas fonctionné.
Des idées ?
Voici une capture d'écran du rendu dans IE9 - remarquez que la div (fond rouge) ne s'adapte pas à la hauteur du SVG (rectangle noir).
