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

Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt. Bitte hier nur auf die ursprüngliche Frage antworten, für neue Fragen einen neuen Beitrag erstellen.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.