Thomas Meinike: /(SVG) Skalierung und relative Positionierung

Beitrag lesen

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