11522 sujets

JavaScript, DOM et API Web HTML5

Déclencher un javascript html depuis svg

Comment déclencher un javascript déclaré dans la partie html depuis une action sur un composant d'une image svg incluse dans la page. Ou encore, une action sur un composant (clic, mouseover…) de l'image devrait faire apparaître une "div" masquée de la page.

L'inverse (action sur le svg depuis un composant de la page) ne semble pas poser de problème. Je suis étonnée de faire chou blanc depuis plusieurs jours de recherche sur tous les forums de la terre…

Le code html (page contenant le svg) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Intéraction composants XHTML avec SVG</title>
<script language=JavaScript>
	function montrer(arg1,arg2) {
		var sum=arg1+arg2;
		alert(sum);
	}
</script>

</head>

<body>
<h1>Diverses intégration de SVG dans du XHTML</h1>
<p>Test du javascript inclus dans le HTML et dont le lien est inséré dans le svg : <a href="javascript:montrer(1,2)">clic pour test</a></p>
<h2>Avec la balise object</h2>
<object data="rond.svg" type="image/svg+xml" width="400" height="400">
  On devrait voir une image svg
</object>
<h2>Avec la balise iframe</h2>
<iframe src="rond2.svg" height="400" width="400" frameborder="0">
  <p>On devrait voir une image svg ici</p>
</iframe>
</body>
</html>


La tentative de code svg (l'appel js ne fonctionne pas donc) :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="223.86658"
   height="229.58157"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="rond.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="221.21664"
     inkscape:cy="-33.778423"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="400"
     inkscape:window-height="400"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Calque 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-153.78336,-269.00218)">
    <a
       id="a2987"
       xlink:href="javascript:montrer(1,2)"
       transform="matrix(0.52814291,0,0,0.56844712,72.564883,116.0899)">
      <path
         d="m 577.14287,470.93362 c 0,111.24593 -94.6598,201.42858 -211.42858,201.42858 -116.76877,0 -211.42857,-90.18265 -211.42857,-201.42858 0,-111.24593 94.6598,-201.42857 211.42857,-201.42857 116.76878,0 211.42858,90.18264 211.42858,201.42857 z"
         sodipodi:ry="201.42857"
         sodipodi:rx="211.42857"
         sodipodi:cy="470.93362"
         sodipodi:cx="365.71429"
         id="path2985"
         style="fill:#ff0000;fill-opacity:1;stroke:#241c1c"
         sodipodi:type="arc" />
    </a>
  </g>
</svg>
Hello

Ne crois pas pouvoir appeller une fonction javascript écrit en entête de document avec xlink.
xlink est d'abord et avant tout un namespace avec préfixe des technologies XML.

Celui-ci ne peut cibler qu'un fragment de cette même technologie ou un fragment du même fichier qui l'a créer (svg dans ton cas). xlink peut cibler le id de <defs id="fragment">


Donc aucun rapport entre xlink et javascript.
Il est cependant possible, que tu appelle ta fonction comme ceci

<script type="text/javascript">
function somme (a, b)
{
  var addition = a + b;
  alert (addition);
}
</script>

Ton script svg

<svg . . . les attributs . . .>
  <script><!CDATA[ somme (12, 12); ]]></script>
</svg>


Avec <script><!CDATA[ script javascript et DOM ]]> à l'intérieur de ton SVG tu pourras faire ce que tu veux.
Ton script peut être écrit au complet dans le fichier SVG avec la balise <script> et <!CDATA[ . . . ]]>

Voci un exemple complet : avec embed pas avec object. observe bien le chemin du fichier svg.

<!-- ton !DOCTYPE ici -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript SVG et DOM</title>
<script type="text/javascript">
function somme (a, b)
{
  var addition = a + b;
  alert (addition);
}
</script>
</head>

<body>
<p><embed width="400" height="400" src="svg/scriptSVG_01.svg"></p>
</body>
</html>

Le script svg ici : c'est à la ligne 35 que ta fonction somme ( ) est appeler.

<?xml version="1.0" encoding="iso-8859-1"?>
<svg id="root" xml:space="preserve" width="400" height="400" onload="OnLoadEvent(evt)">
<script>
<![CDATA[
var appui=false;
var xm;
var ym;
function accrocher(evt)
{
  if (evt.getTarget().getAttribute("id")=="plan")
  {
    xm=evt.getClientX();
	ym=evt.getClientY();
	appui=true;
    rectangle.setAttribute("x",xm);
    rectangle.setAttribute("y",ym);
  }
}
function bouger(evt)
{
  if (appui==true)
  {
    xm=evt.getClientX();
	ym=evt.getClientY();
    rectangle.setAttribute("x",xm);
    rectangle.setAttribute("y",ym);
  }
}
function lacher(evt)
{
  if (evt.getTarget().getAttribute("id")=="rectangle")
  {
    appui=false;
  } 
  somme (120, 100);
}
function OnLoadEvent(evt)
{
  var doc = evt.getTarget() != null ? evt.getTarget().getOwnerDocument() : null;
  if (doc != null)
  {
    rectangle=doc.getElementById("rectangle");
  }
}
]]>
</script>
<g onmousemove="bouger(evt)" onmousedown="accrocher(evt)" onmouseup="lacher(evt)">
  <rect id="plan" x="0" y="0" width="400" height="400" style="fill:#E0E0E0"/>
  <rect id="rectangle" x="0" y="0" width="100" height="50" style="fill:#CC0000"/>
</g>
</svg>

Exécute le en zone de test. Oubli pas que c'est un test - aucun lien avec ta recherche.
Son fonctionnement est simple tu clique dans la zone grise (reste cliquer et bouge ta souris) dans la zone grise et le rectangle maroon devra suivre le pointeur. C'est lorsque tu déclique que la fenêtre « alert » va ouvrir. Mentionnant la somme - L'appelle de ta fonction est exécuté.

Pour les autres membres ? - ne pas essayé sans avoir le viewer (SVG) 3.3 de Adobe.

Liens avec full zip - full exemples: javascript SVG et DOM de pilatinfo.org
Pilatinfo.org : Accueil

Le langage par défaut pour SVG est ECMAScript : type="text/ecmascript" - c'est opérationnel

Une petite note en passant : fait attention avec SVG. Rare sont ceux et celles qui ont le viewer SVG - très rare. SVG étant surtout utiliser par une élite. Ce qui peut provoquer des zones vides sur ta page - Surtout avec un iframe. Utilise embed pour éviter ce désagrément.

PS : bon d'ac que la fonction somme ( ) ne fait pas très bien avec l'exemple mais si tu fais ceci

function message (msg)
{
  return alert (msg);
}

et dans ton code SVG :<script><!CDATA[message ('Vous avez lâcher le bouton de la souris');]]></script> : alors là c'est mieux Smiley biggrin

++
Modifié par zardoz (25 Nov 2010 - 11:22)
Merci pour cette réponse précieuse. Je vais étudier tout ça et me mettre à niveau. Le résultat très important pour l'instant est que l'opération est faisable. Il ne me reste plus qu'à comprendre et produire le code bien correct.
Salut

Alors bonne continuation.
Dernière adresse toujours sur pilat mais très complet : tutorials avec codes sources

À propos de xlink : Charge du .js externe
Remarque ici que la balise <script> est utilisé dans le SVG : <script xlink:href="js/alert.js"/>

C'est vieux pilatinfo : 2001 - 2002. Pour ne pas dire désertique : m'enfin c'est une bonne base disons.
Moi je le nomme plateinfo.org Smiley biggrin

++
Modifié par zardoz (25 Nov 2010 - 21:39)
Bonjour,

J'ai testé l'exemple complet fourni le 25 novembre , merci. Cet exemple fonctionne très bien sur internet explorer 8 pc mais sur aucun autre navigateur testé (internet explorer 9 pc, firefox pc, firefox mac, safari, opera …) : pas de carré qui se déplace, pas de fonction somme qui se déclenche.

Que faire ? modifier le doctype, la balise xmlns ????

Aurais-tu une idée ?

Merci
Sujet clos
Aller à