SVG - Verknüpfen

Das Element <a> wird zum Erstellen eines Hyperlinks verwendet. Das Attribut "xlink: href" wird verwendet, um die IRI (Internationalized Resource Identifiers) zu übergeben, die zu URI (Uniform Resource Identifiers) komplementär ist.

Erklärung

Es folgt die Syntaxdeklaration von <a>Element. Wir haben nur Hauptattribute gezeigt.

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

Attribute

Sr.Nr. Name & Beschreibung
1 xlink:show- zu Dokumentationszwecken für XLink-fähige Prozessoren. Standard ist neu.
2 xlink:actuate - zu Dokumentationszwecken für XLink-fähige Prozessoren.
3 xlink:href - Position des referenzierten Objekts.
4 target - Wird verwendet, wenn Ziele für die Endressource möglich sind.

Beispiel

testSVG.htm
<html>
   <title>SVG Linking</title>
   <body>
   
      <h1>Sample Link</h1>
      
      <svg width="800" height="800">
         <g>
            <a xlink:href="http://www.tutorialspoint.com"> 
               <text x="0" y="15" fill="black" >
               Click me to load TutorialsPoint DOT COM.</text>
            </a>
         </g> 
         
         <g>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load TutorialsPoint DOT COM</text>
            
            <a xlink:href="http://www.tutorialspoint.com"> 
               <rect x="100" y="80" width="300" height="100"
               style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" /> 
            </a>
         </g>
      </svg>
   
   </body>
</html>

Ausgabe

Öffnen Sie textSVG.htm im Chrome-Webbrowser. Sie können Chrome / Firefox / Opera verwenden, um SVG-Bilder direkt ohne Plugin anzuzeigen. Internet Explorer 9 und höher unterstützt auch das Rendern von SVG-Bildern. Klicken Sie auf den Link und das Rechteck, um das Ergebnis anzuzeigen.

Drucken