Zur Startseite - about-svg.de
  ViewBox
  Symbole
  Hyperlinks
  Rasterbilder
   
   
   
   
   

 

 

 

Hyperlinks

 

Ein Hyperlink oder einfach nur Link wird dazu benutzt Inhalte auf beispielsweise verschiedenen Seiten zu verbinden. In SVG können jegliche Objekte wie Pfade oder Texte als Inhalt dienen und referenziert werden. Der Hyperlink in SVG ist ähnlich wie der in HTML, nur dass der mit   a xlink:href ausgezeichnet wird.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

<a xlink:href="http://www.w3c.org" target="new" >
<text x="220" y="135" style="fill:white; font-size:14" >Hyperlink zum W3C
<set attributeName="text-decoration" attributeType="CSS" to="underline" begin="mouseover"/>
<set attributeName="fill" attributeType="CSS" to="#990000" begin="mouseover"/>
<set attributeName="text-decoration" attributeType="CSS" to="none" begin="mouseout"/>
<set attributeName="fill" attributeType="CSS" to="#fff" begin="mouseout"/>
</text>
</a>

<g id="haus" transform=" scale(0.8,0.8) translate(-20,-250)">
<a xlink:href="http://www.haeusle-bauen.de" target="new">
<polyline stroke="black" fill="#3E8EBA" stroke-width="3px"
points=" 70,400 150,350 180,370 180,350 200,350 200,380
235,400 235,470 70,470 70,400" >
<set attributeName="fill" attributeType="CSS" to="#fff" begin="mouseover"/>
<set attributeName="fill" attributeType="CSS" to="#3E8EBA" begin="mouseout"/>
<set attributeName="stroke" attributeType="CSS" to="#CC3333" begin="mouseover"/>
<set attributeName="stroke" attributeType="CSS" to="#000" begin="mouseout"/>
</polyline>
</a>
</g>

 

  nach oben 

 
 
  Zum Leipzig-Entertainer (SVG)  
     
  Zum Campusplan (SVG)  
     
  Zum SVG-Tutorial (SVG)  
     
  Zum Wankelmotor (SVG)