5568 sujets

Sémantique web et HTML

Animation dans une image SVG. Dom cassé ?

Bonjour

Des soucis, cette fois ci avec une image vectorielle en .svg. Voici le code du fichier image :


<?xml version="1.0" encoding="UTF-8"?>
<svg width="800" height="800" 
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

  <g stroke="none" fill="saddleBrown" fill-opacity="1.0" id="lettreS" >
     <text x="300" y="470" stroke="none"
       font-family="Times" font-size="400" font-weight="bold">
       S
     </text>
     <rect x="300" y="100" width="400" height="400" transform="rotate(45 400 200)"
       fill="red" fill-opacity="0.1">
     </rect>
     <set attributeName="fill" from="saddleBrown" to="peru" 
      begin="mouseover" end="mouseout" />
  </g>
</svg>


En gros, il y a une lettre "S" dont je veux que la couleur change lorsque la souris passe dans le voisinage. Donc j'ai créé un carré qui englobe cette lettre. Le tout est dans un groupe, et une anime est déclarée sur ce groupe.

Si je le charge dans mon navigateur (FF), avec "fichier-ouvrir", tout se passe bien.

Mais si je mets mon image dans une enveloppe html, soit :

<!DOCTYPE html>
<html>
  <body>
    <img src="texteAnime.svg" width=400px height=400px  /> 
  </body>
</html>


Eh bien l'animation ne fonctionne plus. Le "S" reste désespérément marron foncé lorsque la souris passe dans le carré rose pale. Apparemment le lien entre le DOM du fichier html et celui de l'image SVG est cassé pour les événements.

Quelqu'un aurait il une idée de la manière de résoudre ce problème ?
Salut,

Pourquoi ne pas utiliser la balise <svg> ?

Si tu veux de l’interactivité avec ton SVG il vaut mieux éviter la balise img (http://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html)

EDIT : un petit complément chez Jérémie Patonnier :
Jérémie a écrit :
Néanmoins, utiliser SVG de cette manière n'est pas trivial. Par exemple, il est possible d'embarquer des langages de scripts dans un document SVG. Or, qui dit langage de script, dit problème de sécurité et la balise img n'a pas été conçue à la base pour traiter ce genre de question. De même, déterminer la taille par défaut en pixel d'une image vectorielle peut parfois être un peu délicat.

Modifié par Gili (11 Feb 2013 - 18:36)
Gili a écrit :


Pourquoi ne pas utiliser la balise &lt;svg&gt; ?



Le SVG que j'ai donné en exemple est très simple et, évidemment, pourrait s'intégrer dans une page web tel quel. Mais dans la réalité mon svg est beaucoup plus gros (100 lignes) et je dois l'inclure à 300 endroits différents dans le projet total : c'est le picto pour retour au sommaire. Donc pas top...

Par contre, merci pour les liens. Je viens de faire un essai avec la balise <object> et ça marche : je garde bien l'anim définie dans le svg fonctionnelle. Dont acte, plus d'img pour les svg Smiley smile
Sujet clos
Aller à