Frage zum Wiki-Artikel „width“

[Matthias Scharwies]

Servus!

Lies ein Tutorial!

Oh weh! Wenn ich jetzt nur wüßte, wie ich „da hin“ kam, ja gar, wie ich es vorzeigen könnte. Jedenfalls habe ich „alles (un-)mögliche“ unternommen, um ein SVG passend in ein ::before hineinzuzaubern. Und bin damit gescheitert: das SVG wollte einfach nie die passende Größe annehmen. Nicht mal annähernd. Dabei hätte es sich an etwas wie 1em oriientieren müssen. Zum Ende war ich dann mit dem Versuch (große Hoffnungen hatte ich in den ja sowieso nicht gesetzt), etwas wie width: calc((1em+0px) / (1em) dazu zu verwenden, da was dimensionsloses draus zu machen. Dann war das Faß voll und ich habe, wieder einmal, gemeckert. Und danach? Wirklich gleich danach? Genau diese eine Stelle auf 1em gesetzt — und plötzlich war das Ding tatsächlich genau so groß im Browser zu sehen. Wenn mir das jemand erklären könnte! (Und natürlich hätte ich da am liebsten gleich diesen „Beitrag“ wieder gelöscht …)

Deshalb evtl. mal ein Live-Beispiel entwickeln, dass nur das aktuelle Problem arstellt. Dann sieht man manchmal schon selbst, wo es hakt.

Lies ein Tutorial!

In SVG/Tutorials/Einstieg/SVG_in_responsiven_Webseiten wird erklärt, wie SVG_als_Leinwand mit einheitenlosem Koordinatensystem funktioniert und mit der viewBox nochmal fokussiert werden kann.

Wichtigstes Hilfsmittel für mich sind diese Zeilen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 250">
<title></title>

<rect width="100%" height="100%" style="fill:none;stroke:hotpink; stroke-width:1" />

So habe ich ein Rechteck, dass mir zeigt, wo meine viewBox „zu Ende“ ist. Wenn ich über den Rand zeichnen muss, verändere ich die viewBow oder verschiebe die bereits vorhandenen Grafikobjekte. (Die Icons der Cards im Wiki haben z. B überwiegend viewBox="0 0 200 200")

Dieses SVG kannst du beliebig skalieren - es ist responsiv.

@Rolf B Hier (https://css-tricks.com/interactive-data-visualization-animating-viewbox/) zeigt css-tricks, wie man mit media queries auf kleinen Viewports einzelne Objekte der Grafik zoomt, bzw andere ausblendet. Da bräuchte ich mal ein gutes Anwendungsbeispiel.

Das SVG passt man dann in ein Pseudoelement ein.

Ach ja: im ::before paßt es immer noch nicht. Aber … da mag ich jetzt auch nicht weiter drüber nachdenken.

• CSS/Tutorials/Selektoren/Pseudoelement#::before_und_::after
• HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_mit_Symbolen_kennzeichnen

Herzliche Grüße

Matthias Scharwies