Thomas Meinike: Breite eines Objekts

Beitrag lesen

Hallo,

Mein Problem ist, dass die Grafik bei einer relativen Breitenangabe (oder ohne jegliche) am Fensterrand abgeschnitten wird, was ich durch den Browser, also per HTML, zu verhindern versuchte.

Keine Angabe zu width bewirkt 100% Breite und diese 100% beziehen sich auf die Fensterbreite (wie andere Prozentwerte auch). Daraus ergibt sich (mit der Hoehe) der so genannte Viewport und der ueberstehende Rest wird abgeschnitten.

Anscheinend bleibt mir jedoch nicht anderes übrig, als die Grafik nach Thomas' Vorschlag zu verkleinern.

Das viewBox-Attribut ist ja gerade fuer solche Faelle gedacht (wobei ggf. auch noch das Attribut preserveAspectRatio zur Beschreibung der Proportionen von Interesse ist).

Hier mal ein kleines (vereinfachtes) Codestueck, welches der Grafik eine Breite von 640 x 480 px zuweist. Das Attribut viewBox deckt jeweils die 4-fache Breite bzw. Hoehe in internen Koordinaten ab. Der Kreis ist wiederum auf diese internen Koordinaten bezogen und wird auf der 640 x 480-Flaeche zentriert dargestellt.

  
<svg width="640" height="480" viewBox="0 0 2560 1920">  
  
  <circle cx="1280" cy="960" r="200" fill="#F00"/>  
  
</svg>

Auf diese Weise lassen sich auch sehr große Werte darstellen, was z. B. den Kartografen zugute kommt.

MfG, Thomas