SVG-Grafik: wie Elemente mit negativen Koordinaten anzeigen

Chris D. OP Moderator Persönliche Seite #5348421
Lesenswert?
• ▲
▼ 
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:

1
<svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

2
<defs>

3
  <symbol id="rechteck">

4
    <rect x="0" y="-50" width="200" height="100" rx="0" ry="0"

5
    fill="rgb(207,231,245)" stroke="rgb(52,101,164)"

6
    stroke-width="2px" />

7
  </symbol>

8
</defs>

9
<use xlink:href="#rechteck" transform="translate(100,100)" />

10
</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.
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Ohman Gast #5348504
Lesenswert?
• ▲
▼ 
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Tom Gast #5348794
Lesenswert?
• ▲
▼ 
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?
1
digraph {

2
    node [shape=box];

3
    Heute -> Kochen;

4
    Kochen -> Backen[label="einen Tag warten"];

5
    Backen -> "Der Frau Königin ihr Kind holen"[label="noch einen Tag warten"];

6
}
Angehängte Dateien:
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren