svg in grid-area skaliert nicht

[michaah]

Beim Versuch meinen Webseiten Smartphoneschlauch für breitere viewports durch das Aufteilen in Spalten anzupassen stoße ich auf das Problem, dass alle Elemente in der dafür bestimmten grid-area angezeigt werden (Ausrichtung wäre der nächste Schritt), bis auf eines: Meine svg-Graphik (im Smartphoneschlauch 98% der Breite füllend) schrumpft hier auf fast nicht auffindbare 4x4px zusammen. Vermutlich sind das einfach die vier Ecken. Im Quellcode wurde zunächst nichts ausser der Definition für die grid-area innerhalb einer @media-query hinzugefügt.

Im Inspector habe ich nun herausgefunden, dass die betreffende grid-area irgendwoher (nicht von mir UND nicht vom Browser) zwangsweise einen min-width Wert von "0" bekommt, ebenso für min-height.

Setzte ich diesen Wert auf 100%, wird die svg-Graphik in der gewünschten Größe angezeigt, auto funktioniert nicht.

Ich habe dazu etwas im wiki gesucht und gegooglet, aber schlau bin ich da nicht geworden. Mir schien die ein oder andere gefundene Problembeschreibung darauf hinzudeuten, dass grid und svg nicht notwendigerweise harmonieren und dafür Handarbeit angesagt ist. Merkwürdigerweise war das Setzen von min-width und min-height auf "0" in anderen Fällen die Lösung, bei mir war es das Problem, was mir noch weniger gefällt. Nur "min-width: 100%;" klingt irgendwie auch nicht wirklich richtig, auch wenn es in diesem Fall "funktioniert".

Der langen Rede kurzer Sinn: gibt es für das Einbinden von svg in Grid sowas wie eine "beste und meist funktionierende" Praxis?

Gruß

M

[Gunnar Bittersmann]

@@michaah

Wie das mit den Größen von Grid-Zellen ist, hat Hidde de Vries doch erst gesten gezeigt.

😷 LLAP

[michaah]

Interessant, allerdings weniger für mein Problem.

[Gunnar Bittersmann]

@@michaah

Meine svg-Graphik (im Smartphoneschlauch 98% der Breite füllend) schrumpft hier auf fast nicht auffindbare 4x4px zusammen. Vermutlich sind das einfach die vier Ecken. Im Quellcode wurde zunächst **n

Kann ich nicht nachvollziehen. Guckst du.

Im Inspector habe ich nun herausgefunden, dass die betreffende grid-area irgendwoher (nicht von mir UND nicht vom Browser) zwangsweise einen min-width Wert von "0" bekommt, ebenso für min-height.

Jede CSS-Eigenschaft hat zu jeder Zeit einen bestimmten Wert. Wenn nirgendwo was angegebern ist, gilt der in der Spec festgelegte Ausgangswert. Und der ist für min-width und min-height nun mal 0. [CSS2.2 §10.4]

😷 LLAP

[michaah]

@@michaah

Meine svg-Graphik (im Smartphoneschlauch 98% der Breite füllend) schrumpft hier auf fast nicht auffindbare 4x4px zusammen. Vermutlich sind das einfach die vier Ecken. Im Quellcode wurde zunächst **n

Kann ich nicht nachvollziehen. Guckst du.

Ich nun schon etwas, aber nur in Teilen, und ohne Lösung:

1. mein img.svg ist kein Kindelement, sondern ein Kindeskind: section/aside/img.svg

EDIT://

Got it!

Mein Kindelement hatte kein width. Warum das in der Normalfassung dennoch klappt (kein grid!), hier im grid dann aber nicht habe ich noch nicht verstanden. Da ist noch vieeeel Luft nach oben.

/Edit://

Das erklärt mir aber immer noch nicht, warum es nicht skaliert.

2. die 4x4 Pixel sind der border: 2px solid <farbe>, vom img.svg selbst ist also 0,0 sichtbar.

Jede CSS-Eigenschaft hat zu jeder Zeit einen bestimmten Wert. ...

3. Ja, das min-width: 0 und min-height: 0 wurde wohl vom inspector auf Grund von Änderungen generiert, die ich im Inspector testweise vorgenommen hatte. In soweit hat sich dieser Aspekt erledigt.

Ich hoffe ja dass es für das nicht skalieren eine offensichtliche Erklärung gibt, ohne dass ihr ne Glaskugel braucht, sonst muß ich den Schrott auch noch falsch nachbauen ... 😉 , was möglicherweise gar nicht so einfach ist.

Gruß und Danke für deine Mühen.

M

PS: In dem codepen kann ich zwar als nicht angemeldeter user editieren, das dann aber nicht ausführen, was die Editierbarkeit etwas absurd macht. Oder geht das doch (als nicht angemeldeter user)? Ich habe das dann in eine lokale Testdatei kopiert und dann dein svg auch eine Ebene tiefer gesteckt. Das skaliert immer noch, wenn auch kleiner.

[djr]

Nutzt die SVG width- und / oder height-Attribute? Im <svg>-Tag z.B.. Dann diese entfernen und die größe evtl. via CSS steuern. Auch kann das Attribut preserveAspectRatio zu ungewolltem verhalten der SVG führen.

Im einfachsten Fall hat Dein SVG-Tag nur ein viewBox-Attribut (evtl. class und id). Der xmlns ist in HTML5 im svg-Tag impliziert und kann daher weggelassen werden.