28116 sujets

CSS et mise en forme, CSS3

Dimensionnement automatique d'images SVG

Bonjour,

J'ai un tableau dont les cellules contiennent des boutons. Ces boutons contiennent une image SVG.

J'aimerais que ce tableau et les images qui sont dans les cellules soient dimensionnés automatiquement.
Ce que je veux dire par là, c'est :
1 - Le tableau prend au mieux toute la place disponible du parent
2 - L'image qui est dans une cellule prend au mieux toute la place disponible de la cellule
3 - L'image conserve son rapport largeur/hauteur comme indiqué dans l'attribut viewBox du fichier SVG (qui est censé être fait pour ça non ?), et est centrée dans la cellule au cas où la proportion ne joue pas avec la taille de la cellule; elle ne doit surtout pas être coupée et il doit y avoir un minimum d'espace vide
4 - Toutes les images et donc les cellules ont la même taille à l'instant T, mais elles ne sont pas forcément carrées
5 - Ca doit fonctionner quelque soit le rapport largeur/hauteur des images

Le code HTML est généré dynamiquement par javascript mais ça donne ça :

<div id="game">
<table>
<tr>
<td>
<a href="#"><img alt="machin" src="machin.svg" /></a>
</td><td>
<a href="#"><img alt="truc" src="truc.svg" /></a>
</td><td>
...
</td></tr>
<tr>
...
</tr>
</table>
</div>



Le code CSS actuel est :

#game {
float: left;
width: 32%;
max-width: 32%;
height: 91%;
max-height: 91%;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}



J'ai fait les constatations suivantes :
* Si je n'indique pas de taille pour les images comme dans le code HTML exposé ci-dessus, elles semblent prendre une taille aléatoire qui n'est pas la bonne, ou alors ça fait des trucs bizarres de 1px de haut
* Si j'indique width=100% ou height=100%, c'est pareil
* Si j'indique width=100% et height=auto ou l'inverse, c'est encore pareil
* width=auto et height=auto c'est encore une fois la même chose
* Les tailles du genre width=1em ne semblent pas fonctionner non plus, c'est comme si elles étaient ignorées
* Par contre si j'indique explicitement une taille en dur, p.ex. width=30 et height=30, les images prennent bien la taille spécifiée mais évidemment ce n'est pas celle qu'il faudrait

Comportements vérifiés avec chrome et firefox; pour le moment j'ai écarté IE et Safari.

J'aimerais bien ne pas avoir à spécifier explicitement une taille. L'entier du truc devrait être fluide et s'adapter à la zone d'affichage disponible. Comment faire ?

Je pourrais convertir les images SVG en PNG ou autre chose, mais j'ai choisi SVG justement parce que c'est censé pouvoir se redimensionner librement sans perte de qualité. De plus je n'ai aucune idée de la taille qu'il faudrait.

Je ne peux malheureusement pas fournir facilement un exemple en ligne, la page en question nécéssite un compte membre avec mot de passe, et en réalité, le code HTML est dynamiquement généré par javascript et les images sont mis à jour selon l'état du jeu.
J'espère que j'ai suffisament décrit ce que je souhaite...

Merci.
Modérateur
Salut QuentinC,

Je t'invite à regarder ce post : SVG, épaisseurs de lignes en CSS. Le sujet vient de s'ouvrir. Mais je pense qu'il va t'intéresser aussi.

Par ailleurs, je pense que tu devras faire quelques petites recherches sur glouglou à propos de ces attributs et règles css :
- viewBox (attribut élément svg sensible à la casse)
- preserveAspectRatio (attribut élément svg sensible à la casse)
- vector-effect (règle css)

Je pense que tu vas devoir oublier img au profit de svg. Pour un projet, j'avais comme toi. Insérer un svg dans img. Lorsque j'ai redimensionné l'image, sur IE (même le 10), j'avais un rendu douteux (scaling disproportionné).

<<<EDIT
parcours cet article : L’attribut viewBox en SVG. Je pense qu'il devrait répondre à ta question.
EDIT;
Modifié par niuxe (19 Jul 2015 - 19:22)
Bonjour,

Je n'ai rien pour tester sous la main mais je pense que le piège est ici : dans une feuille de style width:100% prend effectivement 100% de la taille laissée disponible par l'élément parent, pas de souci de ce côté là. En revanche height:100% ne donnera que 100% de la dimention height définie dans la balise html img (à destination du SVG j'entends), donc... 0 de hauteur étant donné que celle-ci n'est pas définie.

Edit : +1 avec Niuxe pour l'abandon de la balise img au profit du SVG inline.
Modifié par Olivier C (19 Jul 2015 - 20:59)
a écrit :
parcours cet article :
L’attribut viewBox en SVG.
Je pense qu'il devrait répondre à ta question.


Merci. En l'occurence j'avais bien compris cet attribut. et d'ailleurs, l'élément <svg> du fichier n'a pas d'attributs width et height; en toute logique ça ne sert à rien puisque je ne connais pas et ça ne m'intéresse pas de connaître la véritable taille de l'image une fois insérée dans la page.
Par contre je vais regarder pour preserveAspectRatio, je ne connaissais pas.

a écrit :
Je n'ai rien pour tester sous la main mais je pense que le piège est ici : dans une feuille de style width:100% prend effectivement 100% de la taille laissée disponible par l'élément parent, pas de souci de ce côté là. En revanche height:100% ne donnera que 100% de la dimention height définie dans la balise html img, donc... 0 de hauteur étant donné que celle-ci n'est pas définie.


Ah... ceci expliquerait déjà les bandes blanches de 1px de haut. Donc, j'ai essayé une mauvaise méthode.
Du coup le plus simple est de faire en sorte que l'image prenne toujours toute la largeur et qu'elle s'aligne verticalement centrée si la cellule est trop grande.

Mais alors pourquoi width=100% et height=auto ne fait pas mieux ?
Parce que si je suis cette logique, ça devrait marcher.

a écrit :
Edit : +1 avec Niuxe pour l'abandon de la balise img au profit du SVG inline.


Oui, mais alors du coup plusieurs questions :

1 - Je fais comment pour l'attribut alt ? C'est le desc de SVG qui le remplace ?
En plus, la même image présente à deux endroits différents n'ont pas le même alt; l'alt contient les coordonnées de la case, p.ex. H5, en plus de ce qui se trouve sur la case.

2 - Ici j'ai présenté les choses de manière simple; en réalité le code HTML que j'ai donné en exemple est entièrement géré par javascript. C'est une grille de jeu.
Du coup je fais comment ? Je suis obligé de récupérer les fichiers par AJAX, les parser, puis virer le prologue XML, le doctype et les autres trucs invalides en SVG inline ?
Est-ce que ça marche d'ajouter/supprimer des noeuds SVG dans le DOM ?

3 - Je ne prévois pas de faire de manipulations sur les SVG eux-mêmes, c'est pour ça que j'ai opté très naturellement pour <img/>
Est-ce que passer à du SVG inline ne risque pas d'être dramatique pour les performances ? Sachant que la plus grande grille possible actuellement est 15x15 donc 225 cases donc avec 225 images.

Merci.
Modifié par QuentinC (19 Jul 2015 - 21:08)
Modérateur
QuentinC a écrit :

Mais alors pourquoi width=100% et height=auto ne fait pas mieux ?
Parce que si je suis cette logique, ça devrait marcher.


Quand tu lis la doc sur cet attribut, tu t’aperçois que la valeur auto n'existe pas. Smiley cligne


QuentinC a écrit :

1 - Je fais comment pour l'attribut alt ? C'est le desc de SVG qui le remplace ?
En plus, la même image présente à deux endroits différents n'ont pas le même alt; l'alt contient les coordonnées de la case, p.ex. H5, en plus de ce qui se trouve sur la case.

+1 question pertinente
En fait il y a 2 éléments à renseigner :
- desc
- title

Dans tous les cas, ça se passe comme ça (valid w3c):


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg">
  <title>
    titre générale
  </title>
  <desc>
    description générale
  </desc>
<g>
  <title>
    le titre de l'élément graphique compris dans le groupe (&lt;g&gt;)
  </title>
  <desc>
     description de l'élément graphique comprise dans le groupe (&lt;g&gt;)
  </desc>
  <!-- élément svg graphique -->
</g>
</svg>

Certains navigateurs auront la fâcheuse habitude d'afficher une infobulle au survol. le texte choisi sera le premier élément. Là suivant mon exemple, il devrait reprendre le texte de title ( titre générale)

QuentinC a écrit :

2 - Ici j'ai présenté les choses de manière simple; en réalité le code HTML que j'ai donné en exemple est entièrement géré par javascript. C'est une grille de jeu.
Du coup je fais comment ? Je suis obligé de récupérer les fichiers par AJAX, les parser, puis virer le prologue XML, le doctype et les autres trucs invalides en SVG inline ?
Est-ce que ça marche d'ajouter/supprimer des noeuds SVG dans le DOM ?

oui, puisque le SVG est un DOM !

exemple fait rapidement : 

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #global{font-family: sans-serif;max-width: 800px;margin: 0 auto;}
        svg{
        	fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:1.41421;
        }
        #Calque > *{
        	fill:none;stroke-width:1px;stroke:#000;
        	vector-effect:non-scaling-stroke;
        }
    </style>
</head>
<body>
    <div id="global">
        <div>
        <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g id="Calque">
	<path d="M0,0 h 100 v 100 h -100 z" />
	<path d="M0,100l100,-100"/>
	<path d="M0,0l100,100"/>
</g></svg>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed doloremque quod iusto omnis nobis quisquam illum veritatis rerum et eos perspiciatis dolorum quia aliquam necessitatibus dicta qui adipisci quam suscipit? ipsum dolor sit amet, consectetur adipisicing elit. Error eveniet repellendus officiis tempora ratione atque vel mollitia minus eos repudiandae voluptatibus exercitationem enim provident dicta quisquam beatae adipisci. Dolorem ratione! ipsum dolor sit amet, consectetur adipisicing elit. Error similique quo ea suscipit accusantium quas perspiciatis nihil quos delectus qui sunt mollitia ad repellendus inventore magni fugit quisquam nostrum labore. ipsum dolor sit amet, consectetur adipisicing elit. Nemo deserunt inventore eaque labore quas facilis distinctio tempora odio sapiente sint facere dolorum esse iste nesciunt suscipit illum soluta excepturi mollitia.</div>
    </div>
    <script>
    window.addEventListener('load',function(){
        document.querySelectorAll('#global svg')[0].addEventListener('click',function(){
        	console.log(this);
        });
    });    
    </script>
    
    
</body>
</html>


QuentinC a écrit :

3 - Je ne prévois pas de faire de manipulations sur les SVG eux-mêmes, c'est pour ça que j'ai opté très naturellement pour &lt;img/&gt;

Comme je t'ai dit précédemment, j'ai eu des soucis avec IE. mais j'ai bien saisie ta démarche qui était louable à l'origine.

QuentinC a écrit :

Est-ce que passer à du SVG inline ne risque pas d'être dramatique pour les performances ? Sachant que la plus grande grille possible actuellement est 15x15 donc 225 cases donc avec 225 images.


Là tu abordes un vaste sujet. Je vais essayer de t'expliquer le principe. Le problème n'étant pas tellement le poids du fichier. Le problème étant le nombre de vecteur et surtout le nombre de points d'ancrages. Par exemple, tu peux avoir un fichier de 20ko mais en fait, tu ne peux pas l'utiliser parce qu'il y a trop de vecteur et de points d'ancrage quelque soit sa taille affiché à l'écran. Pour te donner un exemple concret, quand tu vas faire un tour sur google map avec un vieille ordi, "le fichier" pèse le même poids mais l'application sera pas du tout performante.

Si avec un objet graphique vectoriel, tu comptes en créer plusieurs occurences, les clones devraient t'aider :

<svg width="400" height="300" xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
        	<title>une forêt de sapins</title>
        	<style type="text/css">
		    	#sapin rect{ fill:peru; } 
		    	#sapin polygon{ fill:forestgreen; }
        	</style>
        	<g id="sapin"> 
        		<rect x="45" y="70" width="10" height="20"/>
        		<polygon points="20,70 80,70 60,55 70,55 55,40 65,40 50,20 35,40 45,40 30,55 40,55"/>
        	</g>
        	<use xlink:href="#sapin" transform="translate(100,100) scale(1.5)"/>
        	<use xlink:href="#sapin" transform="translate(10,190) scale(1.2)"/>
        	<use xlink:href="#sapin" transform="translate(300,-20) scale(2)"/>
        	<use xlink:href="#sapin" transform="translate(320,200) scale(0.4)"/>
        	<use xlink:href="#sapin" transform="translate(200,160) scale(0.2)"/>
        	<use xlink:href="#sapin" transform="translate(170,30)"/>
        </svg>

Modifié par niuxe (20 Jul 2015 - 00:52)
a écrit :
Quand tu lis la doc sur cet attribut, tu t’aperçois que la valeur auto n'existe pas.


Oups, au temps pour moi. J'aurais juré que la valeur auto était parfaitement admise. Bien joué.

a écrit :
+1 question pertinente
En fait il y a 2 éléments à renseigner :
- desc
- title


Du coup il faut que je teste ça avec Jaws, NVDA et VO. Je vous tiens au courant. Merci.


a écrit :
Certains navigateurs auront la fâcheuse habitude d'afficher une infobulle au survol.


Pas de changement par rapport à un alt classique alors, puisqu'ils le font déjà (notamment IE).

a écrit :
Si avec un objet graphique vectoriel, tu comptes en créer plusieurs occurences, les clones devraient t'aider :


Intéressant de pouvoir dupliquer des groupes ainsi. Par contre dans mon cas je suppose que je ne peux pas le faire, puisque ce serait plusieurs éléments <svg> distincts / indépendants.
OU alors j'ai pas compris ton code.


==========

Après quelques recherches, il semblerait que les performances de SVG inline ne sont pas si terribles que ça.
C'est intéressant, il y a vraiment du pour et du contre entre img et SVG inline.

J'ai deux gros inconvénients :
* Je dois récupérer les fichiers avec AJAX et les traiter en javascript, c'est un peu chiant par rapport au simple <img/>
* <img/> a comme avantage le cache. Étant donné que les joueurs ont un compte et sont à terme des habitués plutôt que des nouveaux, ils n'ont aucun intérêt à charger 36 fois les mêmes images

Si ça ne marche pas trop sur IE ce n'est pas très grave (même IE11), les utilisateurs windows ont tout intérêt à télécharger l'application desktop qui leur est réservée.

Il y a quand même un truc qui m'intéresse bien dans les SVG inline: une classe CSS suffirait pour changer la couleur des pièces; et ça c'est cool.
Je ne serais pas obligé de faire 4 images différentes pour le joueur rouge, le jaune, le vert et le bleu. Drôlement pratique.

En faisant des recherches, icon font sort aussi souvent comme comparatif à SVG.
Je trouve quand même cette comparaison un peu étrange, vu que icon font est limité aux icônes monochromes.

Merci.
Modifié par QuentinC (20 Jul 2015 - 10:11)
Modérateur
QuentinC a écrit :


Oups, au temps pour moi. J'aurais juré que la valeur auto était parfaitement admise. Bien joué.


C'est ça de penser CSS Smiley cligne Smiley lol

QuentinC a écrit :

Du coup il faut que je teste ça avec Jaws, NVDA et VO. Je vous tiens au courant. Merci.


Ah oui avec plaisir Smiley smile

QuentinC a écrit :

Pas de changement par rapport à un alt classique alors, puisqu'ils le font déjà (notamment IE).

Moi même, j'ai pas le souvenir d'avoir vu cela. Mais je me souviens bien d'avoir lu cela une fois. La mdn ou svg essential

QuentinC a écrit :

Intéressant de pouvoir dupliquer des groupes ainsi. Par contre dans mon cas je suppose que je ne peux pas le faire, puisque ce serait plusieurs éléments &lt;svg&gt; distincts / indépendants.
OU alors j'ai pas compris ton code.


De mémoire, tu peux même définir et ensuite de cette déifnition, tu en fais des clones. Comment mettre en place cela :

<defs>
    <g id="rectangle">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>

  <use xlink:href="#rectangle" x="50" y="50" />
  <use xlink:href="#rectangle" x="200" y="50" />

Tu vas me dire, que le groupe (<g>) est toujours là. oui mais defs et tous ces enfants ne s'afficheront pas. Smiley cligne

C'est à voir, mais je pense que tu as garde l'unicité. à ton <use>, tu peux très bien ajouter un id. Je pense qu'en faisant un getElementsByTagName, tu as plusieurs noeuds en sortie.

QuentinC a écrit :

Après quelques recherches, il semblerait que les performances de SVG inline ne sont pas si terribles que ça.
C'est intéressant, il y a vraiment du pour et du contre entre img et SVG inline.


Le souci que j'avais rencontré, c'était IE. Comme je n'avais pas le temps, de traiter pour IE, j'avais fait un user agent. Je sais, c'est pas terrible, mais pour all IE, c'était png.
QuentinC a écrit :

J'ai deux gros inconvénients :
* Je dois récupérer les fichiers avec AJAX et les traiter en javascript, c'est un peu chiant par rapport au simple &lt;img/&gt;
* &lt;img/&gt; a comme avantage le cache. Étant donné que les joueurs ont un compte et sont à terme des habitués plutôt que des nouveaux, ils n'ont aucun intérêt à charger 36 fois les mêmes images

N'oublie pas que la base, c'est de l'XML (responseXML). Je t'avoue que le querySelector family ou getElements family c'est reloud. Si tu te débrouilles bien, édite tes svg et groupe tes éléments par une classe spécifique.

Ce qui pourrait être intéressant, c'est d'utiliser le localStorage pour gérer le cache. Pour webkit, il y a mieux ! Sqlite intégré !

Le problème de <img> et je pense que tu te brides. Tu ne peux pas exploiter le svg pleinement. Exemple : un hover sur une zone précise d'un svg intégré dans un img, tu ne récupères pas l’interaction.

QuentinC a écrit :

Il y a quand même un truc qui m'intéresse bien dans les SVG inline: une classe CSS suffirait pour changer la couleur des pièces; et ça c'est cool.
Je ne serais pas obligé de faire 4 images différentes pour le joueur rouge, le jaune, le vert et le bleu. Drôlement pratique.


;) Smiley smile
Modifié par niuxe (21 Jul 2015 - 01:09)
a écrit :
De mémoire, tu peux même définir et ensuite de cette déifnition, tu en fais des clones. Comment mettre en place cela :

...


Tu vas me dire, que le groupe (<g>) est toujours là. oui mais defs et tous ces enfants ne s'afficheront pas.
Smiley cligne

C'est à voir, mais je pense que tu as garde l'unicité. à ton <use>, tu peux très bien ajouter un id. Je pense qu'en faisant un getElementsByTagName, tu as plusieurs noeuds en sortie.


Ca ne répond pas à ma question en fait. Je vais avoir plusieurs SVG indépendants. Est-ce que ce genre d'astuce va fonctionner ?
Si j'ai une définition dans un SVG et que je veux l'utiliser dans un autre SVG, je peux ?


a écrit :
Le souci que j'avais rencontré, c'était IE. Comme je n'avais pas le temps, de traiter pour IE, j'avais fait un user agent. Je sais, c'est pas terrible, mais pour all IE, c'était png.


JE crois que je vais faire pareil pour une solution rapide, en attendant de réussir à mettre en place ce que vous proposez dans ce topic.

a écrit :
Le problème de <img> et je pense que tu te brides. Tu ne peux pas exploiter le svg pleinement. Exemple : un hover sur une zone précise d'un svg intégré dans un img, tu ne récupères pas l’interaction.


ON est bien d'accord là-dessus. Mais comme je l'ai dit, je n'ai pas besoin de cette possibilité.
Modérateur
QuentinC a écrit :


Ca ne répond pas à ma question en fait. Je vais avoir plusieurs SVG indépendants. Est-ce que ce genre d'astuce va fonctionner ?
Si j'ai une définition dans un SVG et que je veux l'utiliser dans un autre SVG, je peux ?


Je ne crois pas que ça fonctionnera puisque tu ne seras pas sur le même dom. Après il y a la notion d'id. Ce qu'il faudrait, c'est tout simplement essayer dans un fichier html avec 2 svg. Un pour la definition et l'autre pour la création d'occurences.

QuentinC a écrit :
ON est bien d'accord là-dessus. Mais comme je l'ai dit, je n'ai pas besoin de cette possibilité.


Je comprends bien. Cependant, je pense que tu développeras par la suite et tu risques de te retrouver coincé et être obliger à faire du remaniement. Smiley ohwell . Tu sais c'est un peu si tu décides de faire un site à la old school (<table>) et style en ligne.
Modifié par niuxe (23 Jul 2015 - 01:23)
Bon, je viens de tester l'accessibilité des SVG inline. Le résultat est sans appel :

JFW+IE9: title et desc sont lus tous les deux, dans l'ordre d'apparition
JFW+IE11: idem
JFW+firefox: rien !
JFW+Chrome: rien !
NVDA+IE9: title et desc sont lus tous les deux, dans l'ordre d'apparition; le dernier qui apparaît est doublé
NVDA+IE11: idem !
NVDA+firefox: rien !
NVDA+Chrome: rien !
VO+Safari sur iOS 8.4: rien !

Bravo Microsoft !
Les autres, je ne les félicite pas.

LE message est clair, le SVG inline est majoritairement inaccessible. Il faut utiliser un autre moyen pour rendre le texte alternatif.
Du coup je doute fort que les possibilitées plus avancées que propose SVG d'après ce que j'ai déjà pu lire, comme la possibilité de mettre le focus sur une région précise du SVG, soient plus accessibles. Ca reste à tester.

Code utilisé pour le test :

<!DOCTYPE HTML>
<html><head>
<title>Test SVG</title>
</head><body>
<h1>Test SVG</h1>
<p>Image 1 : </p>
<p>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Title  1</title>
<desc>Desc 1</desc>
<circle cx="50" cy="50" r="50" fill="pink" stroke="red" />
</svg>
</p>
<p>Image 2 : </p>
<p>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Desc 2</desc>
<title>Title 2</title>
<circle cx="50" cy="50" r="50" fill="yellow" stroke="blue" />
</svg>
</p>
<p>Fin du test</p>
</body></html>


Plus grave, si le SVG inline est inclus dans un lien :


<a href="#">
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Title  1</title>
<desc>Desc 1</desc>
<circle cx="50" cy="50" r="50" fill="pink" stroke="red" />
</svg>
</a>


Le texte alternatif n'est pas plus lu. ET sur IE il faut faire deux fois tab pour passer au lien suivant si on renseigne title et desc.

Conclusion, les API d'accessibilité des navigateurs en-dehors de IE9-11 sont à la ramasse, ils ne communiquent rien au lecteur d'écran dans ce cas.

EDIT: j'ai fait quelques recherches, et en ce qui concerne la'ccessibilité des SVG inline, j'ai trouvé cet article :
http://www.sitepoint.com/tips-accessible-svg/

J'ai retesté et il suffit d'ajouter role="img" et alors ça marche sur IE et firefox sans bug.
Modifié par QuentinC (24 Jul 2015 - 17:02)
Désolé, je fais un double post, ça se justifie parce que l'autre était un spécial accessibilité, un peu décâlé par rapport au sujet de départ.

J'abandonne, j'y arrive pas.

J'ai essayé de remplacer les <img/> par des <svg>. Résultat, plus rien ne fonctionne. Même si je mets explicitement width et height à une valeur fixe, mon petit script de debug me rapporte des tailles d'image de 0x19 sur firefox et 0x18 sur IE.
Le script de debug consiste à afficher la valeur de offsetWidth et offsetHeight, qui sont censé toujours être correctes et absolues. Je n'ai pas d'autre moyen de vérifier si la taille des images est correcte...
Ca me fait ça que j'insère le SVG à la innerHTML ou bien avec du createElement/setAttribute/appendChild.
En plus le texte alternatif créé dynamiquement n'a pas l'air de m'être restitué, alors que ça marche en statique sur firefox.

Ca ne marche vraiment que si je donne une taille en px pour une des deux dimensions. Dans ce cas, l'autre suit correctement, en tout cas sur firefox.
Comme je n'ai aucune idée de comment calculer ça correctement, j'ai mis une largeur arbitraire: 24px. C'est minuscule mais zut.
Sujet clos
Aller à