Forum Programmation.web Intégrer un fichier svg dans un document HTML, et interagir avec ce document depuis la page HTML.

Posté par totof2000 le 23 mars 2013 à 00:46. Licence CC By‑SA.

Étiquettes :

mar.

2013

Bonjour.

Je cherche à intégrer un document SVG dans une page HTML.

Le document svg en question contient des fonctions Javascript permettant de modifier les styles ou couleurs des éléments.

Je souhaiterais que le document HTML puisse déclencher certains bouts de code Javascript situés dans le document SVG pour modifier l'aspect de celui-ci (actuellement pour mes tests le document HTML est composé d'un formulaire qui contient deux boutons qui changent la couleur de certains éléments du doc SVG).

Par contre, dans le but de bien séparer les deux documents (je pourrais intégrer le document SVG dans une autre page HTML, ou même l'appeler directement sans l'intéger dans le HTML), je souhaiterais que ce soit le svg qui "exporte" sa fonction dans le document HTML (voir plus bas). Et pour intégrer le code XML dans mon HTML, je ne peux pas passer par la balise embed. Je pense plutôt utiliser la balise suivante :

<object type="image/svg+xml" data="doc.svg">.

(note :pour ceux qui ont déjà lu cette entrée, la ligne avec la balise ci-dessus n'apparaissait pas jusqu'à ce que je le corrige).

En effet, j'avais essayé avec un tuc du genre dans le doc HTML :

<div align="center">
            <embed src="document_svg.xml" width="400", height="300" type="image/svg+xml"/>
</div>

Une partiee de mon formlaire :

Plus bas la définition de la fonction :

function changeSense(sense) {
        alert("Changement sens: " + sense);
        window.changeS(sense);
}

puis dans le document svg j'ai fait un truc du genre

function init(evt)
            {

                parent.changeS = change_sense_line; // la fonction changeS est disponnible maintenant dans le document HTML appelant 
                svgDocument=evt.target.ownerDocument;
            }

function change_sense_line(dir)
    {
            // dÉFINITION DE LA FONCTION ....

        }

Tout ça marche pas trop mal lorsque j'appelle le document en local (file://chemin_vers_doc_html), mais lorsque je mets tout sur un serveur web, j'ai Firefox (le même) qui me demande un plugin pour afficher le SVG.

La cerise sur le gateau : pouvoir exporter les fonctions vers le document HTML en fonction du nom ou des infos situés dans le document appelant.

Voyez-vous comment je pourrais faire ça ? Avec Object Type, ça semble ne pas être aussi simple …

Merci d'avance.

# intégré avec jquery

Posté par solsTiCe (site web personnel) le 23 mars 2013 à 11:42. Évalué à 2.

je sais pas si ça va vraiment aidé. mais voilà comment j'ai fait. j'ai laissé tombé le javascript à l'intérieur du svg (ça marchait pas) pour intégré directement le svg (inlining) dans le html 5 et utilisé jquery pour la partie javascript. Comme ça, le javascript est séparé du svg et du html. y'a que sur les vieux IE que ça marche pas.

http://kitetrickprogression.appspot.com/
- [^] # Re: intégré avec jquery
  
  Posté par totof2000 le 23 mars 2013 à 15:10. Évalué à 2. Dernière modification le 23 mars 2013 à 15:11.
  
  le javascript est séparé du svg et du html
  
  Oui mais le svg et le html ne sont pas séparés et c'est ce que je voudrais.
  
  Le Javascript dans SVG marche bien.
  Le Javascript dans HTML ne me pose pas de problème.
  
  Par contre c'est l'appel des fonctions Javascript du SVG depuis le HTML qui me pose problème.
  
  Ma contrainte comme je le disais est de gader le fichier svg indépendant car il poura être appelé par d'autres paes HTML, et en fonction des pages appelantes, je voudrais que les fonctions svg puissent être différentes.
  
  JQuery, je ne préfère pas trp pour le moment. JE préfère m'en tenir à une programmation "bas niveau" : il s'ait pour moi d'avoir en visu l'état de capteurs ou de commander des actionneurs, et je crains que la multiplication des couches ne nuisent à la réactivité. Donc pour pouvoir mesurer, je souhaiterais dans un premier temps me passer de JQuery, quitt à me compliquer un peu la vie. Ensuite je testerai avec un jquery pour comparer les perfs et la réactivité (si je peux aoir plus joli et moins complexe avec jquery, pourquoi pas, mais je favorise la sobriété et l'efficacité).
  
  A noter que je ne compte pas rendre mon appli compatible IE.
# Une piste

Posté par Alex G. le 25 mars 2013 à 11:48. Évalué à 2.
Je serais toi, je regarderais si ta fonction n'est pas sur l'objet embed dans le DOM.
```
document.vers.mon.objet.ma_fonction
```
Je déduis ça de http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#the-object-element

If the plugin supports a scriptable interface, the HTMLObjectElement object representing the element should expose that interface. The object element represents the plugin.

Mais j'ai pas le temps de tester pour toi !

Et sinon, hors sujet, ne vaut-il pas mieux utiliser object plutôt que embed ?
- [^] # Re: Une piste
  
  Posté par totof2000 le 25 mars 2013 à 22:22. Évalué à 2.
  
  Je serais toi, je regarderais si ta fonction n'est pas sur l'objet embed dans le DOM.
  
  Je ne sais pas trop comment faire :(. Mais merci pour l'info, je vais regarder ça.
  
  Et sinon, hors sujet, ne vaut-il pas mieux utiliser object plutôt que embed ?
  Pas du tout hors sujet : j'avais oublié de passer une ligne après la phrase " Je pense plutôt utiliser la balise suivante : " et la balise Object n'est pas passée. Jai corrigé le post initial
  
  Avec la balise "embed" ça marche lorsque j'ouvre le fichier avec file:// : lorsque j'affiche la page en passant par le réseau (http://chemin_vers_doc.html), j'ai un cadrre qui demande le téléchargement d'un plugin :(.
  - [^] # Re: Une piste
    
    Posté par totof2000 le 26 mars 2013 à 00:04. Évalué à 2.
    
    Je pense avoir trouvé ce qui ne va pas ….
    
    Je prépare un exemple et je le pose dès que c'est terminé.
    
    J'y suis presque : il me manque un détail et c'est bon.