Forum: PC-Programmierung SVG-Grafik: wie Elemente mit negativen Koordinaten anzeigen


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Chris D. (myfairtux) (Moderator) Benutzerseite


Bewertung
0 lesenswert
nicht 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.

: Bearbeitet durch Moderator
von Ohman (Gast)


Bewertung
0 lesenswert
nicht 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.

von Chris D. (myfairtux) (Moderator) Benutzerseite


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

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

funktioniert es wie gewünscht :-)

von Tom (Gast)


Angehängte Dateien:

Bewertung
0 lesenswert
nicht 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
}

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
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.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.