Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Liens

L'attribut target sur l'élément SVG <a> ne fonctionne pas dans Mozilla Firefox 1.5. Lorsque des documents SVG sont intégrés dans un document HTML parent à l'aide de la balise :

page1.html :

html
<html lang="en">
  <body>
    <p>Voici un bouton SVG&nbsp;:</p>
    <object
      width="100"
      height="50"
      type="image/svg+xml"
      data="button.svg"></object>
  </body>
</html>

button.svg :

xml
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <a href="page2.html" target="_top">
    <g>
      <!-- éléments graphiques du bouton ici -->
    </g>
  </a>
</svg>

La spécification indique que le navigateur doit aller vers le document HTML page2.html lorsque le bouton graphique est cliqué. Cependant, target ne fonctionne pas avec l'implémentation Mozilla de l'élément SVG <a> dans Firefox 1.5. (Le problème est corrigé depuis Firefox 2.0.)

Dans tous les cas, le comportement résultant dans Moz SVG est que page2.html sera chargé dans le cadre où se trouvait le bouton SVG (c'est-à-dire que vous aurez maintenant page2.html intégré dans un cadre de 100x50 pixels à l'intérieur de page1.html).

Pour contourner ce problème, il faut un petit bricolage JavaScript :

button.svg :

xml
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <g onclick="top.document.href='page2.html'" cursor="pointer">
    <!-- éléments graphiques du bouton ici -->
  </g>
</svg>

Exemple

Pour un exemple de cette solution en action, voir www.codedread.com (angl.).