Maskieren in SVG

[Rolf B]

Hallo Mitleser 2.0,

Manchmal ist ein Symbol doch nur ein Symbol, oder?!

Ja. Und machmal ist ein Symbol der Anlass, ein Thema genauer zu erkunden.

Das Symbol wird dann zur Nebensache. Viel interessanter ist, was genau im Browser passiert und welchen Regeln er folgt. Da es mittlerweile mehr Specs gibt als Flöhe auf einem Straßenköter (und sie sich mindestens so schnell vermehren), sind solche Erkundungen wichtig, um bei den im Wiki beschriebenen Themen halbwegs up-to-date zu bleiben. Und wenn man Dinge erklären können will, muss man auch wissen, warum manches so und nicht anders läuft.

Mein Ausgangsproblem habe ich immer noch nicht lösen können: Warum wirken Masken nur bis zu einem bestimmten Bereich um das SVG Element herum. Für das Anliegen "Symbol" habe ich ein Workaround bekommen. Aber was ich bei dem Versuch falsch mache, den über das Element-Rechteck hinausgehenden Stroke zu maskieren, ist offen.

Bei der Gelegenheit habe ich dann gelernt/aufgefrischt, dass der Safari eine Implementierungslücke bei rx/ry und bei bestimmten Mediaqueries hat, und dass <line> Elemente sowie SVG-Pfade generell störrisch sind, wenn es um CSS geht. Das ist aus meiner Sicht durchaus ein Gewinn. Für die Profis unter euch war das vielleicht ein uninteressanter alter Hut. Für mich nicht.

Rolf