Externe Grafiken mit SVG-Elementen kombinieren
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
Natürlich können Sie in SVG-Grafiken auch externe Grafiken mit SVG-Elementen mischen. Das bietet sich an, wenn Sie eine solche Grafik anstelle einer Image-Map nutzen möchten und die externen Grafiken auch an anderer Stelle in einer Webseite noch genutzt werden. Dazu ist es dann natürlich in der Regel notwendig, die externen Grafiken exakt zu positionieren. Das folgende Beispiel zeigt, wie das geht.
Im Prinzip erfolgt die Positionierung von Grafiken, die Sie mit dem <image>-Tag einbinden, genauso wie bei anderen SVG-Elementen. Sie können hier die Attribute x und y angeben oder die Positionierung über das transform-Attribut erreichen.
<?xml version="1.0" standalone="no"?>
...
<svg width="430" height="330">
<rect x="0" y="0" width="100%" height="100%" style="fill:#EAEAEA"/>
<image x="50" y="50" xlink:href="krawatte.png" width="70" height="74" />
<image x="122" y="126" xlink:href="halstuch.png" width="97" height="74" />
<image x="280" y="126" xlink:href="tuchgruen.png" width="97" height="74" />
<image x="50" y="202" xlink:href="tuchgrau.png" width="70" height="74" />
<image x="221" y="202" xlink:href="tuchblau.png" width="57" height="74" />
<g style="stroke:red;stroke-width:1">
<path d="M30 49 h+150" />
<path d="M6 125 h+394" />
<path d="M35 201 h+342" />
<path d="M15 277 h+380" />
<path d="M49 30 v+280" />
<path d="M121 40 v+260" />
<path d="M220 120 v+165" />
<path d="M279 110 v+185" />
<path d="M377 125 v+76" />
</g>
<g style="font-family:'Arial Unicode MS',Arial,Verdana,Helvetica;font-size:16px;font-stretch:condensed;font-weight:bolder">
<text x="123" y="47">Corporate</text>
<text x="346" y="123">Aktuelles</text>
<text x="6" y="123">Trends</text>
<text x="223" y="198">Kontakt</text>
<text x="342" y="291">Produkte</text>
</g>
</svg>
Der vorstehende Code erzeugt dann diese Grafik, in der die Fotos durch externe PNG-Grafiken in die SVG-Grafik integriert werden.
Abbildung: Erzeugt Grafik mit eingebetteten PNG-Grafiken.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de