Java Reference
In-Depth Information
SVG als Hintergrundbild
Ganz klassisch kann man auch eine SVG-Graik per CSS verwenden.
Listing 14.63■
SVG per CSS einsetzen
<div style="background: url(graik1.svg);">
SVG direkt im HTML-Markup
Man kann auch das
<svg>
-Element direkt in eine Webseite schreiben. Das ist dann so etwas
wie eine XML-Dateninsel. In dem Fall funktionieren alle Hyperlinks und der DOM-Zugrif
geht selbstverständlich auch.
SVG mit iframe in HTML einbetten
Wenn Sie die SVG-Datei als Wert von
src
bei einem IFrame angeben, steht Ihnen die Graik
auch in der Webseite zur Verfügung. Das DOM der SVG-Graik steht damit über das IFrame
zur Verfügung und Sie können auch Links verwenden. Mit den entsprechenden Größenan-
gaben in der SVG-Datei (
viewBox
) kann die SVG-Graik beliebig skaliert werden.
14.5.2.10■Programmierung von SVG mit JavaScript
SVG kann mit Hilfe der DOM-Struktur dynamisch per JavaScript angepasst werden. Dabei
stehen alle bekannten Möglichkeiten zur Verfügung. Es können Elemente manipuliert, neu
erzeugt und eingefügt oder in Größe und Gestalt verändert werden. Die Programmierung
von SVG ist vollkommen intuitiv, wenn man DOM-Programmierung kennt. Wir ändern bei
unserem Beispiel einmal die Farbe eines
circle
-Elements beim Überstreichen mit dem
Mauszeiger.
Hier ist zunächst die Webseite
kap14_30.html
mit der eingebetteten SVG-Graik:
Listing 14.64■
Die Webseite mit der SVG-Graik
...
<script src="lib/js/kap14_30.js"></script>
</head>
<body>
<h1>SVG</h1>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" baseProile="full"
width="700px" height="400px" viewBox="0 0 700 400">
<!-- Eine Line -->
<line x1="0" y1="200" x2="700" y2="200" stroke="black"
stroke-width="10px"/>
<!-- Ein Rechteck -->
<rect x="100" y="100" width="500" height="200" ill="blue"
stroke="black" stroke-width="10px" />
<!-- Eine weitere Line -->
<line x1="180" y1="370" x2="500" y2="50" stroke="black"
stroke-width="10px"/>
<!-- Ein Kreis -->
<circle cx="150" cy="75" r="80" stroke="red" ill="green"
stroke-width="5px"/>
</svg>
Search WWH ::
Custom Search