[SVG] Charger un SVG externe
#1
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.
Répondre
#2
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.
Quand on te dit qu'un projet est terminé à 90%, prépare toi pour les 90% suivant
Ninety-Ninety Rule

"Une guerre de religions, c'est quand deux peuples s'entretuent pour savoir qui a le meilleur ami imaginaire"
Vu sur IRC
Répondre
#3
Oui effectivement c'était ça le problème... j'ai mis 3h avant de le voir. Merci en tout cas.
Répondre




Utilisateur(s) parcourant ce sujet : 1 visiteur(s)