Halbkreis darstellen

[Thomas]

Hallo,

ich moechte ein Logo als SVG-Grafik umsetzen, was mir soweit auch ganz gut gelungen ist. Dabei schreibe ich den gesamten Code von Hand und benutze nicht einfach ein Transformier-Programm, um alle kleinen Fehler der GIF-Grafik auszubuegeln.

Nun habe ich bisher nur Vielecke, Kreise und Rechtecke gebraucht, nun brauche ich aber einen in etwa Halben Kreis als Teil des Buchstabens "E". Meine Idee fuer eine Umsetzung ist soweit nur ein Kreis, und dann alle nicht benoetigten Teile mit der Hintergrundfarbe zu ueberdecken. Das funktioniert, ist aber nicht ganz einfach um alles exakt hinzukriegen. Gibt es eine sauberere Loesung? Ich hatte ueberlegt eine Path mit Kurven zu benutzen, bin mir aber nicht ganz sicher wie man das ganz genau als Halbkreis umsetzt; ich habe vorgestern angefangen SVG Tutorials zu lesen und mit Sachen herumzuprobieren.

Kann mir jemand mit Ahnung sagen, wie man sowas umsetzt? Meine Versuche in dieser Richtung sind bisher weniger erfolgreich.

Danke,

Thomas

[Thomas J.S.]

Hallo,

Nun habe ich bisher nur Vielecke, Kreise und Rechtecke gebraucht, nun brauche ich aber einen in etwa Halben Kreis als Teil des Buchstabens "E". Meine Idee fuer eine Umsetzung ist soweit nur ein Kreis, und dann alle nicht benoetigten Teile mit der Hintergrundfarbe zu ueberdecken. Das funktioniert, ist aber nicht ganz einfach um alles exakt hinzukriegen. Gibt es eine sauberere Loesung? Ich hatte ueberlegt eine Path mit Kurven zu benutzen,

Das ist eine gute Idee.
Du kannst dich bedienen:
http://en.wikipedia.org/wiki/Image:Semicircle.svg
Was du daraus wirklich brauchst ist z.B. nur
 <path d="M 150,87.068 L 220.866,87.068 C 220.866,47.93 189.138,16.202 150,16.202 C 110.862,16.202 79.134,47.93 79.134,87.068 L 150,87.068 z " style="fill:none;stroke:#000000;" />

Ein kleines Tutorial:
http://xmlzoo.net/svg/?xml=02.xml&answer=1

Ansonten kannst du ein Programm wie http://www.inkscape.org/ benutzen.

Grüße
Thomas

[siro]

Guten Morgen.

Alternativ könnte man z.B. auch einen normalen Kreis verwenden und den Sichtbereich einschränken:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
[ <!ENTITY Circle "<circle cx='20' cy='20' r='20' fill='red'/>">
]>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMin slice" width="20" height="40">
  &Circle;
</svg>

Mit freundliche Grüßen
_Siro

[Marian]

Hallo Thomas,

Ich bevorzuge es auch, SVG von Hand zu schreiben (SVGs, die nur aus unübersichtlichen Pfaden bestehen, erfüllen IMHO einen der wichtigsten "Zwecke" von SVG nicht: dass man sie leicht bearbeiten kann),
aber für sowas nehme ich dann doch Inkscape zu Hilfe: Ich schreibe den ganzen Kreis, öffne die Datei in Inkscape und wandle den Kreis in einen Pfad um. Dann mache ich mit dem Pfadwerkzeug den vierten Punkt weg, dass ich nur 'nen Halbkreis habe und kopier die Koordinaten (d) des Pfades rüber (nicht speichern!! ;) ).

Viele Grüße aus Freiburg,
Marian

[Thomas]

Hallo,

aber für sowas nehme ich dann doch Inkscape zu Hilfe: Ich schreibe den ganzen Kreis, öffne die Datei in Inkscape und wandle den Kreis in einen Pfad um.

Ja das ist was ich tun werde, Halbkreispfade von Hand zu schreiben, wird wohl doch ein bisschen unuebersichtlich. Ich moechte jedoch den Rest von Hand machen um ueberfluessigen Code zu vermeiden und es ganz exakt zu machen...

Thomas