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

 

 

 

ViewBox

 

Mit dem Element ViewBox können Bildausschnitte festgelegt werden. Es muss für die Umsetzung von viewBox eine Ausgangsgrafik existieren, von der ein bestimmter Teil vergrößert dargestellt wird.

Dabei wird der Sichtabschnitt mit Hilfe eines Rechteckes mit entsprechender Höhe und Breite definiert.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

<!-- Logo wurde vorher definiert und wird hier nicht beschrieben -->

<view id="orig" viewBox="0 0 400 220" zoomAndPan="magnify"/>
<view id="links" viewBox="100 80 25 25" zoomAndPan="disable" />
<view id="rechts" viewBox="230 90 25 25" zoomAndPan="disable" />

rect x="14" y="100" height="15" width="45" rx="5" ry="5" fill="#3E8EBA" stroke="black"/>
<rect x="14" y="100" height="15" width="45" rx="5" ry="5" fill="#3E8EBA" stroke="black"/>

<rect x="67" y="100" height="15" width="50" rx="5" ry="5" fill="#3E8EBA" stroke="black"/>
<a xlink:href="#links">
<text x="18" y="110" style="fill:#000; font-size:8" >linke Seite
<set attributeName="fill" attributeType="CSS" to="#fff" begin="mouseover"/>
<set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
</text>
</a>

<a xlink:href="#rechts">
<text x="71" y="110" style="fill:#000; font-size:8" >rechte Seite
<set attributeName="fill" attributeType="CSS" to="#fff" begin="mouseover"/>
<set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
</text>
</a>
<a xlink:href="#orig">
<rect class="fil0 str0" x="-2" y="0" width="240" height="80" opacity="0"/>
</a>
</g>

 

  nach oben 

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