about-svg.de - Nützliche Elemente

Nützliche Elemente

Skalierung auf den Punkt genau

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.

Darstellungsprobleme dieses SVG-Elements bei der nativen SVG-Unterstützung des Browsers.

SVG-Viewer macht hier keine Probleme.

[ Zurück ]

--- Eine günstige Prepaid UMTS Flatrate mit Surfstick fürs mobile Internet. ---

Beispiel - ViewBox

Quellcode: ViewBox

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>

Nützliche Elemente

Login Form

Main Menu

Social Bookmark

Beispiel - ViewBox

Quellcode: ViewBox

SVG-Projekte

Shirt-Designer