SVG-Grafik: wie Elemente mit negativen Koordinaten anzeigen

[Chris D. (myfairtux) (Moderator)]

Hallöchen!

Zwecks späterer automatischer Generierung über Skripte arbeite ich mich 
gerade etwas in den Aufbau von SVG-Dokumenten ein. Die Anforderungen 
sind nicht groß, es geht nur um einige Rechtecke, etwas Text und Linien 
(Ablaufdiagramm).

Ich probiere gerade händisch etwas herum, habe aber bei der Eingabe 
negativer Koordinaten das Problem, dass die Grundformen im negativen 
Bereich abgeschnitten werden:

<svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <symbol id="rechteck">
    <rect x="0" y="-50" width="200" height="100" rx="0" ry="0"
    fill="rgb(207,231,245)" stroke="rgb(52,101,164)"
    stroke-width="2px" />
  </symbol>
</defs>
<use xlink:href="#rechteck" transform="translate(100,100)" />
</svg>

Wie zu sehen bringt auch eine Verschiebung des Elementes (zumindest hier 
im Firefox 58.0.2) nichts.

Wo ist mein Fehler?

Vielen Dank für jeden Hinweis.

[Ohman (Gast)]

Das SVG-Koordinatensystem entspricht dem 4. Quadranten und beginnt bei 
0,0. Dementsprechend liegst du mit deinen -50 außerhalb des 
darstellbaren Bereichs. Zuerst solltest du eine fixe Größe definieren 
und/oder einen Viewport einstellen, dann sollte das auch mit dem 
Verschieben klappen.

[Chris D. (myfairtux) (Moderator)]

Vielen Dank, das war die Lösung. Man muss den Viewport mittels viewbox 
verschieben

Mit

<symbol id="rechteck" viewBox="0 -50 300 300">

funktioniert es wie gewünscht :-)

[Tom (Gast)]

Zum Debuggen kann man das SVG mit Inkscape öffnen, damit werden auch 
Elemente außerhalb des eigentlich sichtbaren Bereichs dargestellt.

Chris D. schrieb:
> einige Rechtecke, etwas Text und Linien
> (Ablaufdiagramm).
Vielleicht tut graphviz schon das, was Du brauchst, und Du musst nicht 
mehr selbst malen?

digraph {
    node [shape=box];
    Heute -> Kochen;
    Kochen -> Backen[label="einen Tag warten"];
    Backen -> "Der Frau Königin ihr Kind holen"[label="noch einen Tag warten"];
}