nicht angemeldet
/(SVG) Skalierung und relative Positionierung
Hi
Ich bin dabei, mich in SVG einzuarbeiten und bin nun auf zwei Fragen gestossen, auf die ich nicht selbst eine Lösung fand.
Ich lass, dass man Grafikelemente relativ positionieren könne. Wie man das jedoch genau macht blieb mir ein Rätsel: Wenn ich zwei Textelemente darstellen will und die x- und y-Attribute weglasse, dann werden diese gar nicht angezeigt. Notiere ich sie gleichwertig, so werden die Elemente übereinander dargestellt. Kann ich die Elemente ähnlich wie bei HTML/CSS die float-Werte inline und block formatieren? Gibt es eine Möglichkeit, mehrere Elemente (Circles, Rectangles und Texts) zu gruppieren (ähnlich dem DIV-Tag)?
Die zweite Frage betrifft die Skalierbarkeit: Wie skaliere ich eine Grafik auf A4-Grösse und zwar so, dass der gesamte Platz ausgefüllt wird? Zu dieser Frage fehlt mir jegliche Idee eines konkreten Lösungsansatzes. Wie kann man alle Elemente vergrössert oder verkleinert darstellen?
Ich bin für jeden Hinweis dankbar.
Gruss
Tom2
-
Hallo,
Wenn ich zwei Textelemente darstellen will und die x- und y-Attribute weglasse, dann werden diese gar nicht angezeigt. Notiere ich sie gleichwertig, so werden die Elemente übereinander dargestellt. Kann ich die Elemente ähnlich wie bei HTML/CSS die float-Werte inline und block formatieren?
text-Elemente erwarten x- und y-Koordinatenangaben bzw. verwenden den Punkt (0,0) als Voreinstellung. Allerdings ist damit die Grundlinie des Textes gemeint und somit sieht man bei (0,0)-Platzierung nur noch die Unterlaengen.
Fließtext kann man erst mit neuen in SVG 1.2 definierten Elementen umsetzen (der Adobe SVG Viewer 6.0 preview 1 kann das ansatzweise).
Verwende text-/tspan-Kombinationen:
<text x="20" x="100"> <tspan x="20" dy="1em">Zeile 1</tspan> <tspan x="20" dy="1em">Zeile 2</tspan> <tspan x="20" dy="1em">Zeile 2</tspan> </text>Gibt es eine Möglichkeit, mehrere Elemente (Circles, Rectangles und Texts) zu gruppieren (ähnlich dem DIV-Tag)?
Ja, es existiert das g-Element.
Die zweite Frage betrifft die Skalierbarkeit: Wie skaliere ich eine Grafik auf A4-Grösse und zwar so, dass der gesamte Platz ausgefüllt wird? Zu dieser Frage fehlt mir jegliche Idee eines konkreten Lösungsansatzes. Wie kann man alle Elemente vergrössert oder verkleinert darstellen?
Verwende im svg-Wurzelelement prozentuale Angaben, z. B. width="100%" und height="100%" und setze die Relation von internen Koordinaten zu Userkoordinaten (Viewport) ueber das Attribut viewBox="x y width height" (z. B. auf A4).
Ein anderer Weg ist die Verwendung einer Skalierung mittels scale(), siehe dieses Beispiel:
http://svgmob.datenverdrahten.de/w4n/?cc=LG&sc=2 (siehe WEATHER 4 NOW).Hier ist der Viewport auf das Display eines Handys ausgelegt und ueber den Parameter sc erfolgt die Skalierung, wobei sich alle Inhalte proportional vergroeßern.
MfG, Thomas
-
Hallo,
...
Verwende im svg-Wurzelelement prozentuale Angaben, z. B. width="100%" und height="100%" und setze die Relation von internen Koordinaten zu Userkoordinaten (Viewport) ueber das Attribut viewBox="x y width height" (z. B. auf A4).Dazu passend gibt es im Archiv das Beispiel mit der Flagge von Norwegen als SVG-Variante, wobei im viewBox-Attribut das von Gernot vorgegebene Raster beschrieben wird (viewBox="0 0 22 16"). Die Grafik fuellt wegen width=height="100%" dennoch das jeweilige Anzeigefenster.
MfG, Thomas
-
Hallo Thomas
Wow, eine Antwort vom Meister persönlich: Deine SVG - Learning By Coding-Seite ist natürlich schon lange gebookmarkt ;-)
text-Elemente erwarten x- und y-Koordinatenangaben bzw. verwenden den Punkt (0,0) als Voreinstellung.
Das habe ich mir aufgrund meiner Versuche schon fast gedacht...
Verwende text-/tspan-Kombinationen:
Tspan ist demnach SVG 1.1? Nun, ich habe mich nun doch für die absolute Positionierung entschieden.
Gibt es eine Möglichkeit, mehrere Elemente (Circles, Rectangles und Texts) zu gruppieren (ähnlich dem DIV-Tag)?
Ja, es existiert das g-Element.
Besten Dank, genau das habe ich gesucht!
Auch mit deinen Angaben zur Skalierung scheine ich mit einigen Experimenten zu einem akzeptablen Ergebnis zu kommen. Ich stosse jedoch auf ein neues Problem:
Wie kann ich sicherstellen, dass beim Client die ganze Grafik und nicht nur ein Ausschnitt dargestellt wird? D.h. notfalls sollen Scroll-Balken eingeblendet werden. Meine Grafik ist halt leider etwas grösser. Kannst du mir vielleicht auch dazu einen Tipp aus dem Handgelenk schütteln?FG & besten Dank
Tom
-
Hallo,
Tspan ist demnach SVG 1.1?
Ja, bzw. seit 1.0 existent. SVG 1.1 hat 1.0 lediglich durch die Modularisierung in die mobilen Profile Basic und Tiny erweitert, aber nicht durch neue Moeglichkeiten (ggf. noch Fehlerkorrekturen). Neue Features gibt es erst mit 1.2.
D.h. notfalls sollen Scroll-Balken eingeblendet werden. Meine Grafik ist halt leider etwas grösser. Kannst du mir vielleicht auch dazu einen Tipp aus dem Handgelenk schütteln?
Scrollbars gibt es nicht, aber man kann sich das Look-and-Feel via Scripting nachbauen. Schau mal in der "GUI-Abteilung" von Kevin Lindsey vorbei.
MfG, Thomas
-
-