JeuWeb - Crée ton jeu par navigateur
[SVG] Charger un SVG externe - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [SVG] Charger un SVG externe (/showthread.php?tid=5666)

[SVG] Charger un SVG externe - Maz - 27-08-2011

Ok, deux heures(et je n'exagères pas) pour charger un fichier .svg dans un autre, j'abandonnes.
J'ai regarder 36fois les mêmes tuto, le site du W3C, ça paraît simple... J'ai regarder les forums, où le seul topic trouvé était en résolu pour cause d'incompatibilité avec le nav (FF 3.0), j'ai donc télécharger Opéra, et même Amaya!
Impossible de charger un simple fichier .svg généré par illustrator dans un autre fichier .svg généré dynamiquement par PHP...

J'ai essayer:
  • Avec la balise <image> directement dans <svg>.
  • Avec la balise <image> dans defs et <use> dans <svg>.
  • Avec la balise <image> dans un <svg id="image"> dans <defs> puis un <use xlink:href="#image"> dans <svg>.
  • Avec simplement la balise <g>, et un background-image:url("monimage"); dans le css.
  • Avec l'attribut externalResourcesRequired="true" de partout.

Voici mon code généré par php au dernière news:


<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

	<svg externalResourcesRequired="true" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

		<defs>

			<title>Astar: carte à cases hexagonales orientées verticalement</title>

			<image id="herbe" width="38,64" height="29,32" xlink:href="../images/herbe.svg" />

		</defs>

		<g id="map">

			<g class="tuile" id="x:0y:0"><use xlink:href="#herbe" x="220.45407685049" y="0" />

			<text x="230.45407685049" y="15" fill="white">0,0</text></g>

			<g class="tuile" id="x:0y:1"><use xlink:href="#herbe" x="195.95917942265" y="12.247448713916" />

			<text x="205.95917942265" y="27.247448713916" fill="white">0,1</text></g>

			<g class="tuile" id="x:0y:2"><use xlink:href="#herbe" x="171.46428199482" y="24.494897427832" />

			<text x="40" y="440">Résolution impossible</text>

		</g>

	</svg>
Quelqu'un a déjà fait l'expérience?

Merci.

RE: [SVG]Charger un svg externe. - Roworll - 30-08-2011

Je sais que la raison de ton problème de rendu peut paraître idiote mais dans la section defs, les attributs width/height du tag image sont incorrectes
Cela devrait être
width="38.64" height="29.32"
au lieu de
width="38,64" height="29,32"

La virgule n'est pas reconnue comme séparateur de décimale.

Accessoirement, le tag <g id="map"> n'est pas fermé correctement mais en visualisation au format HTML sous Firefox, ça semble fonctionner quand même. Avec une extension SVG, par contre, ça coince.

RE: [SVG] Charger un SVG externe - Maz - 30-08-2011

Oui effectivement c'était ça le problème... j'ai mis 3h avant de le voir. Merci en tout cas.