Responsiver Clip-Pfad mit Inline-SVG

Beim Anwenden eines Clip-Pfads auf ein Element mit Hintergrund ist es üblich, das SVG inline einzubetten. Es können jedoch Probleme mit der Reaktionsfähigkeit oder Ausrichtung auftreten, wie im folgenden Beispiel dargestellt:

Das Problem

In diesem Beispiel hat das Inline-SVG explizite Abmessungen (4000 Pixel breit), die möglicherweise viel größer sind als die tatsächliche Größe des Headers. Folglich wird der Clip-Pfad unverhältnismäßig groß, was zu einer unerwarteten Ausrichtung führt.

Die Lösung: clipPathUnits="objectBoundingBox"

Um einen responsiven Clip-Pfad zu erstellen, können Sie clipPathUnits= verwenden Attribut „objectBoundingBox“:

Mit diesem Attribut sind die ViewBox und die Abmessungen der SVG-Datei irrelevant und der Clippfad wird stattdessen auf den Begrenzungsrahmen des Elements skaliert, auf das er angewendet wird. Dies gewährleistet eine reaktionsschnelle und konsistente Ausrichtung des Clip-Pfads, unabhängig von der Größe des Elements.