x51398: Problem mit "clip-path: url(...)"

Beitrag lesen

problematische Seite

Guten Morgen,

ich scheitere daran, ein Bild mittels "clip-path" korrekt responsiv zu maskieren.

Ich habe

  • eine SVG-Datei mit der gewünschten Form und dem gleichen Seitenverhältnis wie das Bild angelegt
  • die Größe der SVG-Datei auf max. 1px gesetzt (wg. clipPathUnits="objectBoundingBox")
  • den entsprechenden "defs/clipPath"-Abschnitt mit den entsprechenden Angaben eingefügt
  • den SVG-Code ins HTML eingefügt
  • dem Bild mittels "clip-path: url(#mask)" die Maske zugewiesen

Leider erstreckt sich die Maske nicht über die gesamte Bildhöhe, nur bis ca. 50%. Hat jemand einen Tipp für mich?

Vielen Dank, viele Grüße

Sebastian