Frage zum Wiki-Artikel „width“

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies,

wie man mit media queries auf kleinen Viewports einzelne Objekte der Grafik zoomt

Soweit ich das erkenne: Nö. Er berechnet die bounding box und schiebt die in das viewBox Attribut.

Du hast ein HTML-Dokument mit Inline-SVG. Das ist schön breit, weil Desktop (gedacht: viewBox="0 0 640 480").

Von Media Queries träumt er - das setzt nämlich voraus, dass viewBox zum presentation attribute würde. Und das ist es nicht.

Nein, ich würde jetzt den Browser den Viewport ermitteln lassen. Wenn unter 30em Breite nicht alles ins Winzige skalieren, sondern jetzt die Inhalte neu anordnen:

SVG nur noch gedacht: viewBox="0 0 480 640" - da es ja kein Präsentationsattribut ist. Man kann aber width und height, bzw. aspect-ration des SVG neu setzen.

Aber die Geometrie-Attribute der einzelnen Objekte kann man mit CSS in die Media Queries schreiben:

.legend {
  x: 600;
  Y: 100;
}


@media (width < 30em) {
  .legend {
      x: 100;
      Y: 400;
  }
}

Jetzt wäre das rect .legend nicht mehr rechts oben, sondern unten platziert und man würde das auf Handy-Bildschirmen besser sehen.

Insofern versteh ich jetzt nicht ganz, was Du möchtest.

Die Idee habe ich, siehe oben verlinktes css-tricks-Tutorial, mir fehlt nur ein gutes Anwendungsbeispiel, vorzugsweise eine Infografik.

Herzliche Grüße

Matthias Scharwies