Lösungen zu Komplexe Grafikelemente und Formatierungen einsetzen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

  1. Die SVG-Datei mit einem Dreieck an der Position 20/20 erfordert folgenden Code:
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg>
  <path d="M20 20 h+20 l-10+10 z" style="stroke:black" />  
</svg>
  1. Um den Bogen zu erzeugen, gibt es mehrere Befehle für den <path>-Tag. Eine mögliche Lösung wäre also:
  2. <path d="M50 50 a15 15 0 0 0 +30 0" style="stroke:black;fill:none" />
  3. Um den Halbkreis zu schließen genügt eine h- oder z-Anweisung am Ende des d-Attributs: d="M50 50 a15 15 0 0 0 +30 0 z"
  4. Um den Halbkreis zu füllen und die Transparenz auf 50% zu setzen, ergänzen Sie das style-Attribut: style="stroke:black;fill:red;opacity:0.5".
  5. Um die beiden Elemente zu gruppieren, verwenden Sie wieder den <g>-Tag.
<g>
  <path d="M20 20 h+20 l-10+10 z" style="stroke:black" />  
  <path d="M50 50 a15 15 0 0 0 +30 0 z" style="stroke:black;fill:red;opacity:0.5" />
</g>

   

<< 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