SVG <a>-Element

Definieren Sie einen Hyperlink mit dem SVG-Anker-Element (<a>). Das SVG <a>-Element wird verwendet, um Links in SVG-Bildern zu erstellen, und SVG-Links funktionieren wie HTML-Links.

Einfaches Beispiel:

<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>

Dies ist das Ergebnisbild:

Sie können-Setzen Sie die Eigenschaft xlink:show auf new oder replace im element <a>, um zu bestimmen, ob der Inhalt, auf den der Link zeigt, im neuen Fenster angezeigt werden soll oder der Inhalt des vorhandenen Fensters ersetzt werden soll.

Beachten Sie, dass der iframe, wenn Sie ihn verwenden und ein SVG-Bild im iframe anzeigen, das Ziel des Links sein wird, nicht das Browserfenster. Wenn Sie das Browserfenster und nicht das Zielfenster iframe verwenden möchten, verwenden Sie das Attribut target mit dem Wert _top.

Sie können auch die target-Eigenschaft einstellen, um dem Browser mitzuteilen, dass Links in einem bestimmten Rahmen oder in einem bestimmten Fenster geöffnet werden sollen. Genau wie bei den Attributen von Links im targetHTML (zumindest theoretisch). Beachten Sie, dass der Browser die Werte der Eigenschaft auf unterschiedliche Weise interpretiert. Für weitere Details siehe den letzten Teil dieser Seite.

Grafiken als Links

Graphiken können auch als Links verwendet werden. Alles, was Sie tun müssen, ist, den Link, der als SVG-Formelement verwendet werden soll, als <a> und </a>Tag zwischen den Links. Dies ist ein Beispiel, bei dem ein Rechteck anstelle von Text als Link verwendet wird:

<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>

Dies ist das Ergebnisbild: