Guten Tag,
ein Problem/Verhalten, das mich bei der Verwendung von SVGs stört ist, wenn ich ein Icon habe mit einer umrandenden Linie und diese Umrandung passgenau zum viewport ist (width und height ist nicht gesetzt), so wird diese Linie bei einer Ändernung der stroke-width beschnitten.
Alles, was den Viewport verlässt wird beschnitten.
Ich habe daraufhin gesehen, dass die Browser Firefox & Chrome intern den style "svg:not(:root) { overflow: hidden; }" verwenden. Wenn ich das in meinem stylesheet überschreibe mit overflow: visible; bekomme ich im Firefox das gewünschte Verhalten: der stroke ist außerhalb des viewports sichtbar.
Die einzige Methode die bisher wirklich funktioniert ist, dass ich den viewport eben größer mache. Dann ist der umrandende Stroke sichtbar, aber ich verliere den Vorteil, dass das Icon passgenau ist, weil ja sein viewport nicht mehr bündig ist und ich muss schon beim Erstellen des Icons diesen Stroke berücksichtigen, was sehr frickelig werden kann, wenn ich ein und das selbe Icon in unterschiedlichen Größen darstellen möchte.
Gibt es hierfür eine bessere Lösung?
lg mark
akzeptierte Antworten
SVG - stroke von Umrandungen
Matthias Scharwies
SVG - stroke von Umrandungen
Jonathan Harker
Gunnar Bittersmann