SVG - stroke von Umrandungen

[Matthias Scharwies]

Servus!

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.

Lege einfach Werte für x und y mit der halben Konturstärke fest. (Bei stroke-width="2" also x="1", da die Kontur mittig auf dem Rand verläuft.)

Siehe auch : SVG/Farben/Kontur

Ich habe daraufhin gesehen, dass die Browser Firefox & Chrome intern den style "svg:not(:root) { overflow: hidden; }" verwenden. [...]

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.

Geht m.E. nach nicht anders.

Gibt es hierfür eine bessere Lösung?

Deine Lösungen sind m.E. eher Umwege, die einfachste Lösung siehe oben.

lg mark

Herzliche Grüße

Matthias Scharwies