(SVG) Anfänger-Wappen-Problem

[dbenzhuser]

N'Obend

Ich möchte gerade ein super simples Wappen in SVG schreiben: Weißer Schild, unten ein wenig spitz zulaufend, innen ein rotes Kreuz, dass bündig an die vier Ränder anliegt. Links, oben, rechts kein wirkliches Problem, unten aber schon...

Auszug aus der SVG-Datei:

<path fill="white" stroke="black" stroke-width="4" d="M0,0 h540 v320 q0,245 -270,320 q-270,-75 -270,-320 z" />
 <path fill="red" stroke="black" stroke-width="4" d="M0,220 h220 v-220 h100 v220 h220 v100 h-220 v290 h-100 v-290 h-220 z" />

So siehts bisher aus: http://home.arcor.de/dbenzhuser/daten/wappen.png

Ich definiere mir also zuerst die weiße Grundform und passe dann das Kreuz ein, nur weiß ich nicht wie ich das unten bei den Bezirkurven machen soll.

Ich müsste irgendwie die Schnittpunkte zwischen den vertikalen Linien im Kreuz mit dem Bogen unten berechnen - nicht mal ansatzweise eine Ahnung wie ich sas machen soll :(

Am liebsten wäre mir, wenn sich das Kreuz einfach von alleine auf den Innenraum des Schildes begrenzen würde. Nur wie sage ich ihm das?
Momentan ist es auch noch ein Problem, dass an den anderen drei Seiten nun jeweils beim Kreuz zwei scharze Striche übereinander liegen, was zwar theoretisch egal wäre, praktisch aber bei der Kantenglättung sichtbar wird.

Jemand eine Idee wie man so was angeht?

Tschö,
dbenzhuser

[Thomas Meinike]

Hallo,

Jemand eine Idee wie man so was angeht?

Verwende doch einfach ein geeignetes Grafikwerkzeug mit SVG-Export (CorelDRAW, Illustrator, Inkscape, ...).

Ich habe Deinen Code mal in Jasc WebDraw geladen und den Umgebungspfad etwas nach oben geschoben -- dabei wurden Transformationen bemueht:

  
<path fill="#ffffff" stroke="#000000" stroke-width="4"  
  d="M0 0 L540 0 L540 320 C540 483.333 450 590 270 640 C90 590 0 483.333 0 320 z"  
  translate(270 0) scale(1 0.982812) translate(-270 0) translate(270 0) scale(1 0.99841) translate(-270 0)"/>  
<path fill="#ff0000" stroke="#000000" stroke-width="4"  
  d="M0 220 L220 220 L220 0 L320 0 L320 220 L540 220 L540 320 L320 320 L320 610 L220 610 L220 320 L0 320 z"/>

MfG, Thomas

[dbenzhuser]

N'Obend

Verwende doch einfach ein geeignetes Grafikwerkzeug mit SVG-Export (CorelDRAW, Illustrator, Inkscape, ...).

Ich habe Deinen Code mal in Jasc WebDraw geladen und den Umgebungspfad etwas nach oben geschoben -- dabei wurden Transformationen bemueht:

Ja, einfach rumschieben und hoffen, dass es passt geht schon - so hab ichs jetzt auch gemacht (mit Inkscape) - allerdings befriedigt das diesen kleinen fiesen Perfektionisten in mir nicht wirklich ;)

Was ebenfalls noch mein Problem war: ich will, dass das Kreuz sich unten an die Linie "anschmiegt"... Mit geringerer Strichbreite lässt sich das aber natürlich in dem kleinen Bereich als Linie annähern.

Dank und Tschö,
dbenzhuser

[Thomas Meinike]

Hallo,

Ja, einfach rumschieben und hoffen, dass es passt geht schon - so hab ichs jetzt auch gemacht (mit Inkscape) - allerdings befriedigt das diesen kleinen fiesen Perfektionisten in mir nicht wirklich ;)

Naja, SVG lernen und anwenden bedeutet nicht, dass man alle Grafikinhalte staendig im Texteditor erstellt. Oft werden jedoch zusaetzliche Scripts benoetigt und dann ist es wichtig, die Elemente und ihre Attribute zu kennen, um via DOM darauf zugreifen zu koennen. Da kommen durchaus Dokumente im Bereich von einigen hundert KB an, die erweitert werden sollen ...

Die Berechnung von Bézier-Kurven ist ueber die Polynome keine große Sache, aber die noetigen Stuetzpunkte fuer die gewuenschten Boegen (und damit die Boegen selbst) lassen sich bei komplexeren Verlaeufen besser visuell mittels Zeichenprogramm als mit Brain 1.0 ermitteln ;-).

Was ebenfalls noch mein Problem war: ich will, dass das Kreuz sich unten an die Linie "anschmiegt"... Mit geringerer Strichbreite lässt sich das aber natürlich in dem kleinen Bereich als Linie annähern.

So habe ich das gar nicht verstanden, aber die verbleibende Flaeche sollte sich fuellen lassen.

MfG, Thomas