web-dev-qa-db-fra.com

Navigateur croisé SVG preserveAspectRatio

J'essaie d'avoir un graphiqueSVGdans une balise <img /> qui conviendrait (sans recadrage) à l'intérieur de la balise avec un rapport hauteur/largeur préservé. J'ai créé leSVGdans Inkscape. Cela a fonctionné comme prévu sur tous les navigateurs sauf pour Internet Explorer 9 .

Pour que cela fonctionne sur IE 9 , je devais ajouter les viewBox="0 0 580 220" et preserveAspectRatio="xMidYMid meet" et supprimer les propriétés width="580" et height="220"SVG.

<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>

Cela semblait fonctionner partout, jusqu'à ce que je l'essaie sur Webkit , où la balise <img /> est étirée verticalement, bien que le rapport de format duSVGsoit effectivement préservé.

Lorsque je remets les propriétés width="580" et height="220", cela fonctionne sur Webkit mais sur IE 9 le rapport de format est perdu.

Existe-t-il une solution multi-navigateurs pour ce comportement?

html5svgcross-browser
23
Peter Hudec

On dirait que j'ai trouvé la solution:

Vous devez conserver les propriétés width et height dans le fichier SVG.

<svg
    width="580"
    height="220"
    viewBox="0 0 580 220"
    preserveAspectRatio="xMidYMid meet"
>...</svg>

Et pour que cela fonctionne sur IE 9 vous devez spécifier au moins une dimension de la balise <img />.

<img src="your.svg" style="width: 100%" />

Cela semble fonctionner partout.

36
Peter Hudec

Je l'ai résolu en définissant le CSS suivant sur le:

width: 100%; max-width: (largeur souhaitée en px)

6
Becario Senior

La solution dans mon cas utilisait la réponse de Peter Hudec, mais à cause de l'utilisation de width: 100%; sur la balise <img />, qui cassait la mise en page sur tous les navigateurs non-IE9 , j'ai ajouté un hack CSS pour IE9 (width: 100%\9\0;). J'espère que cet ajout aidera quelqu'un. :-)

Même utiliser le preserveAspectRatio="xMidYMid meet" n'était pas nécessaire.

(Je voulais ajouter seulement un commentaire, et pas répondre, mais pas encore de réputation pour le faire :-)

1
bencergazda

Juste une suggestion supplémentaire: L'utilisation d'un sélecteur d'attribut basé sur le suffixe du nom de fichier .svg peut être utile dans les cas où vous avez besoin de ce comportement sur tout votre contenu svg et que vous n'avez pas le contrôle du balisage.

Par exemple

img[src$=".svg"] {
    width:100%;
}
0
brennanyoung

Je pensais juste que je voudrais ajouter comment je suis entré dans une solution. J'ai eu du mal à comprendre certains des problèmes au début.

  1. Editez votre fichier SVG pour supprimer les attributs de hauteur et de largeur codés en dur. (avec un simple éditeur de texte)
  2. Appliquez width: 100% css à votre image svg pour que IE l'affiche comme les autres navigateurs. (aussi gros que son contenant)
  3. Utilisez CSS sur votre conteneur d'images pour des résultats cohérents!

J'ai créé une page pour la décrire plus en détail sur http://ivantown.com/posts/svg-scaling-with-ie/

0
Ivan Work