Grafik (Pfad) erstellen?

Alice

Erfahrenes Mitglied
Hallo. :)

Ich befasse mich seit einiger Zeit mit SVG. Der Grund warum ich mich für SVG entschieden habe ist das ich mit meinem Projekt (welches auf Pixel Grafiken aufgebaut ist) an die technischen Grenzen gestoßen bin.

Als erstes habe ich mit Inkscape eine komplette Grafik erstellt und bin auch sehr zufrieden damit. Ich habe mir auch AI gekauft, aber damit komme ich einfach nicht klar. Ich finde Inkscape in der Bedienung viel einfacher.

Zu meinem Projekt:
Ich arbeite an einem Verkehrzeichen Generator. Aktuell ist es so das ich die Hintergrundgrafik (das Schild) lade und anschließend die Buchstaben, Zahlen und Symbole auf die Hintergrafik lade und so ein komplettes Verkehrzeichen erstelle.

Nun habe ich mit Inkscape alle Buchstaben und Zahlen erstellt. Die Grafiken sehen sehr gut aus.

Aber ich kann die Grafiken nicht wirklich benutzen.

Ich habe keine Ahnung was ich beim erstellen der Grafiken falsch gemacht habe, aber viele der Pfade fangen bereits mit negativen (Minus) Werten an und es scheint unmöglich die Grafik beliebig zu positionieren. Und gerade das ist für mein Projekt wichtig.

Diesen Pfad habe ich mir aus dem XML-Editor von Inkscape kopiert:
PHP:
m -1403.1496,-584.64569 -38.9764,38.96745 0,58.46679 38.9764,-38.96745 0,214.36785 38.9764,0 0,-272.83464 -38.9764,0 z

Ich kann diesen Pfad nicht an eine beliebige Position einfügen. Denn wenn ich X=0 und Y=0 einstelle, befindet sich ein Teil der Grafik ausserhalb des Dokumentes. Ich denke das liegt an dem Wert "-38.9764" im Pfad. Denn soviel ich verstanden habe, fängt der "Stift" bei "-38.9764" an zu zeichnen.

Was kann ich denn machen? Ich möchte doch einfach nur Vektorisierte Grafiken die ich später beliebig in einem XML-Dokument positionieren kann.

Hier der Code für das XML-Dokument:
PHP:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100mm" height="100mm">

<defs>
   <path id="SVG1" d="m -1403.1496,-584.64569 -38.9764,38.96745 0,58.46679 38.9764,-38.96745 0,214.36785 38.9764,0 0,-272.83464 -38.9764,0 z"/>
</defs>

<use xlink:href="#SVG1" x="0mm"   y="5mm" width="0" height="0"/>
<use xlink:href="#SVG1" x="10mm"  y="5mm" width="0" height="0"/>
<use xlink:href="#SVG1" x="20mm"  y="5mm" width="0" height="0"/>
<use xlink:href="#SVG1" x="30mm"  y="5mm" width="0" height="0"/>
<use xlink:href="#SVG1" x="40mm"  y="5mm" width="0" height="0"/>

</svg>

Was mache ich falsch? Was kann ich denn machen, damit ich die Grafik so positionieren kann wie z.B. normale Grafiken in PHP oder so auch? Ich dachte ich gebe die Position ein (z.B. X=0 und Y=0) und die Grafik wird genau dort angezeigt.
 
Hi,
soviel ich weiß ist es wichtig das dein Dokument in Inkscape/Illsutrator genau die Abmaße hat wie der Bereich in dem die Grafik dargestellt wird. Heißt der Nullpunkt muss identisch im Programm und Web sein.

Viele Grüße
 
Zurück