11549 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Adapter une image SVG à la largeur de la page

Bonjour,

Je suis actuellement entrain de réaliser un plateau de jeu avec du HTML5/CSS3 et je souhaite poser une carte du monde simplifiée au centre. Cette carte du monde est au format SVG et elle doit être accessible via DOM pour en modifier certains attributs.

Pour l'instant, j'ai placé cette carte "tel quel" à l'aide de la balise suivante : 
<svg xmlns="http://www.w3.org/2000/svg" width="770" height="570"> la description de l'image </svg>

Je sais y accéder via JS sans soucis mais je ne trouve pas de technique pour que l'image s'adapte à la largeur de la page.

Pensez-vous que c'est réalisable ? Si oui, par quel moyen tout en conservant l'accès aux propriétés de l'image !

Merci d'avance.
Modifié par george258 (01 Feb 2013 - 23:24)
Salut,
As tu essayé de mettre width:100% et height:auto ?
Sinon tu peux essayer de la mettre dans un conteneur (avec des dimensions en %) et en css tu mets à ta carte :
max-width: 100% (c'est la technique utilisée pour rendre les images flexibles en responsiv design).

Sinon en javascript, tu as cette fonction pour calculer les dimensions de le fenêtre :

//  http://webbricks.org/bricks/winDim/
 
function winDim() {
	var W,H,
		i = window,
		d = document,
		de = d.documentElement,
		db = d.body;
		
	if ( i.innerWidth ) { // autres que IE
		W = i.innerWidth;
		H = i.innerHeight;
	} else if ( de.clientWidth ) { // IE8
		W = de.clientWidth;
		H = de.clientHeight;
	}
	else { // IE6
		W = db.clientWidth;
		H = db.clientHeight;
	}

	return {w:W, h:H} ;
}

Tu as les dimensions de la fenêtre du visiteur et tu peux adapter la taille de ton image.
Ensuite, il y a l'évenement onresize :
https://developer.mozilla.org/fr/docs/DOM/element.onresize

+++
Salut,

J'avais fais des images au format SVG pour des petites icônes sur un site Internet, j'ai vite laissez tombé pour passer au classique bitmap et aux sprites.

Sache que le SVG n'est pas complètement pris en compte par tous les navigateurs, y compris les plus récents. Tu auras sans doutes des problèmes aussi avec les polices de caractères si tu t'éloigne des très classiques Arial and co.

Sache aussi que tu auras des problèmes (sans doutes) avec des effets de rollover (par exemple) si tu les gères directement en SVG.

Et pour finir, penses dès le départ à tous les éléments dont tu as besoin pour ton SVG et de les gérer avec ton logiciel. Ne commence pas à vouloir rentrer dans le code, sinon tu y passeras toute ta vie jusqu'a la fin Smiley smile

Bon, si après cela tu veux toujours utiliser le SVG, dans ce cas essaye avec jQuery (ou JavaScript) sur un évènement (par exemple window.resize) de changer la taille de ton SVG.
En réalité, j'avais simplifié un peu le problème, mon image ne fait pas la largeur de la page mais celle d'un bloc définit en pourcentage. De manière globale, l'utilisation du SVG ici apparaît dans un projet totalement expérimental avec l’adjonction des websocket par exemple. Si ça ne fonctionne pas exactement comme je veux sur tous les navigateurs, ce n'est pas grave. Ça ressemble plus à une preuve de concept qu'à quelque chose de fonctionnel !

En terme d'opérations, le SVG ne contiendra que quelques polygones (une trentaine) colorés dont la couleur changera d'après une fonction JS.

Par rapport à ce que vous m'avez dit, j'ai repensé à deux trois éléments et j'ai réussi à trouver la solution à mon problème. Cette solution est assez bête et elle est à base de "viewBox" qui définit la zone "affichable" du SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="98%" height="100%" viewBox="0 0 800 580">


De la sorte, si je redimensionne ma page, ma "carte" s'adapte automatique sans soucis. J'espère que ça pourra en aider certains.

Merci de vos suggestions, ça m'a beaucoup aidé !
Sujet clos
Aller à