Élément <a> SVG

Définissez un hyperlien en utilisant l'élément de pointeur SVG ( <a>). L'élément SVG <a> est utilisé pour créer des liens dans l'image SVG, les liens SVG fonctionnent comme les liens HTML.

Exemple simple :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a xlink:href="/svg/svg-tutorial.html
　　　　　　　　<text x="10" y="20">/svg/svg-tutorial.html/text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" xlink:show="new">
　　　　　　　　<text x="10" y="40">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="new")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" xlink:show="replace">
　　　　　　　　<text x="10" y="60">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="replace")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" target="_blank">
　　　　　　　　<text x="10" y="80">m/svg/svg-tutorial.html
　　　　　　　　　(target="_blank")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" target="_top">
　　　　　　　　<text x="10" y="100">/svg/svg-tutorial.html
　　　　　　　　　(target="_top")</text>
　　　　</a>
</svg>

Voici l'image de résultat :

Vous pouvez-Configurez l'attribut xlink:show sur <a> en new ou replace pour déterminer si le contenu pointé par le lien doit être affiché dans une nouvelle fenêtre ou remplacer le contenu existant dans la fenêtre.

Veuillez noter que si vous utilisez replace et affichez l'image SVG dans un iframe, l'iframe sera le destinataire du lien而非浏览器 fenêtre. Si vous souhaitez que la fenêtre du navigateur ouvre à la place de la fenêtre cible iframe, utilisez l'attribut target de valeur _top.

Vous pouvez également configurer l'attribut target pour informer le navigateur d'ouvrir le lien dans un cadre ou une fenêtre spécifique. Comme pour les attributs de liens dans targetHTML (au moins en théorie). Notez que les navigateurs interprètent les valeurs des attributs de manière différente. Pour plus de détails, voir la dernière partie de cette page.

Graphique en tant que lien

Il est également possible d'utiliser des graphiques comme liens. Ce que vous devez faire est simplement de lier l'élément SVG à utiliser avec <a> et </Lien entre les balises <a>. Voici un exemple où le lien est fait avec un rectangle plutôt que du texte :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a xlink:href="/svg/index.html" target="_top">
　　　　　　　　<rect x="10" y="20" width="75" height="30"
　　　　　　　　　　　　　　　　style="stroke: #333366; fill: #6666cc"/>
　　　　</a>
　　　　
</svg>

Voici l'image de résultat :