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

[x51398]

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

[Raketenwilli]

<img src="https://....photos/1600/750" alt="Demo">

Ersetze mal die 750 durch eine größere Angabe für die Höhe und staune.

Im Übrigen zwingst Du auf diese Weise den Browser, sich eine ungehörige Menge Daten zu holen und diese dann zu verwerfen. Bei einem Bild mit Transparenz käme wenigstens die Komprimierung zum Tragen.

Ist wohl Dein Beitrag zur Erderwärmung…

[x51398]

<img src="https://....photos/1600/750" alt="Demo">

Ersetze mal die 750 durch eine größere Angabe für die Höhe und staune.

Ich möchte das Seitenverhältnis des Bildes nicht ändern.

Im Übrigen zwingst Du auf diese Weise den Browser, sich eine ungehörige Menge Daten zu holen und diese dann zu verwerfen. Bei einem Bild mit Transparenz käme wenigstens die Komprimierung zum Tragen.

Die Maske verdeckt nur einen kleinen Teil des Bildes. Die Bildbearbeitung möchte ich den Redakteuren ersparen. Hast Du auch eine relevante Antwort?

Ist wohl Dein Beitrag zur Erderwärmung…

In diese Kategorie würde ich eher Deinen sinnfreien Beitrag einordnen.

[Raketenwilli]

Hast Du auch eine relevante Antwort?

Ja, klar. Deine Frustrationstoleranz und, jedenfalls, so wie ich Dein geschildertes und gezeigtes Problem wahrnehme, auch die verwendete Grafik scheint schlicht zu niedrig.

Und für Deine anderen Einwände gilt: Längst nicht jeder Vorschlag, dem Du nur nicht folgen willst (oder kannst), ist „irrelevant“. z.B. lässt sich die Bildbearbeitung auch automatisiert nach einem Upload durchführen.

[x51398]

Ja, klar. Deine Frustrationstoleranz und, jedenfalls, so wie ich Dein geschildertes und gezeigtes Problem wahrnehme, auch die verwendete Grafik scheint schlicht zu niedrig.

Dann ist Deine Wahrnehmung leider getrübt. Die Grafik ist 750px hoch. Wird die Eigenschaft "clip-path..." gesetzt, wird die Maske angewendet, allerdings ist der sichtbare Ausschnitt zu niedrig (ca. 350px). Deshalb ist nur ein Teil des Bildes zu sehen. Die Eigenschaft "clipPathUnits='objectBoundingBox'" im SVG-Code sollte den Pfad eigentlich anhand der Bildgröße ausrichten.

Und für Deine anderen Einwände gilt: Längst nicht jeder Vorschlag, dem Du nur nicht folgen willst (oder kannst), ist „irrelevant“. z.B. lässt sich die Bildbearbeitung auch automatisiert nach einem Upload durchführen.

Ich sehe die Notwendigkeit in diesem Fall ehrlich gesagt nicht - wenn der Beschnitt per CSS funktionieren würde, wäre das m. A. nach die bessere Lösung. Deshalb würde ich mich über fachkundige Antwort zum Thema freuen.

[Raketenwilli]

Vielleicht wisst Du es ja mit einem etwas einfacherem probieren:

<img src="https://picsum.photos/1600/750" alt="Demo">
<svg>
  <defs>
    <clipPath id="mask" clipPathUnits="objectBoundingBox">
      <circle cx=".5" cy="2" r="2" />
		</clipPath>
	</defs>
</svg>

Ein Kreis mit einem Mittelpunkt außerhalb des angezeigtem...

[x51398]

Vielen Dank - das ist Klasse!

[Rolf B]

Hallo x51398,

mit clip-path habe ich wenig Erfahrung.

Man kann keine Viewbox für den clip-path festlegen, deswegen kapiere ich nicht ganz, wie man den clip-path korrekt auf dem zu clippenden Bild platziert.

Aber wenn ich in deinem Codepen experimentiere, dann stelle ich fest, dass es besser klappt, wenn man die Angaben im Path als Prozentwerte auffasst. Man muss nicht "M100%,100%" schreiben, "M1,1" geht auch. D.h. man muss davon ausgehen, dass der ClipPath in einer Viewbox von "0 0 1 1" gezeichnet wird. Dann wird das Bild mit dem Clippath ausgefüllt. Das gilt auch für den circle-Vorschlag von Raketenwilli, auch der geht von einer solchen Viewbox aus. Keine Ahnung, wo das dokumentiert ist.

Wenn Du deinen Path mit kubischen Bezier-Kurven baust, würde ich Dir aber empfehlen, oben in der Mitte einen weiteren Stützpunkt zu setzen. Damit kannst Du sicherstellen, dass Du genau an der Oberkante rauskommst, und musst nicht mühsam an den Richtungsvektoren der beiden Ecken spielen, bis Du „zufällig“ mit dem Bogen die Oberkante triffst.

Du könntest eine Ellipse auch mit A (arc) erzeugen statt mit 2x C. Wenn die aber nicht links/rechts rund einmünden soll, spielst Du wieder etwas mit dem y-Radius rum bis Du den oberen Rand triffst.

Beispiel:

      <path d="M1,1 L0,1 L0,0.1 A0.6 0.23 0 0 1 1,0.1 L1,1Z"/>

Ich verwende bei solchen Sachen lieber absolute Pfade, sonst bin ich ständig am Rechnen wo ich gerade bin.

Nachdem ich mit den Selfwiki-Artikel dazu nochmal angeschaut habe, verstehe ich immer weniger. Dort ist ein Polygon im Gebrauch, dass deutlich größer ist als eine "0 0 1 1" Viewbox. Aber es funktioniert trotzdem. Übertrage ich dieses Polygon in deinen Codepen, geht es nicht. Ich verstehe nicht, was da falsch läuft.

Update: Ah, jetzt. Es sind die clipPathUnits. Steht das auf objectBoundingBox, hat man die "0 0 1 1" Viewbox. Lässt man das weg (bzw. nimmt man userSpaceOnUse), werden die im Path angegebenen Koordinaten 1:1 verwendet, und das machen unsere Wiki-Beispiele.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Man muss nicht "M100%,100%" schreiben, "M1,1" geht auch.

Man kann nicht M100%,100% schreiben, nur M1,1 geht.

Wenn Du deinen Path mit kubischen Bezier-Kurven baust, würde ich Dir aber empfehlen, oben in der Mitte einen weiteren Stützpunkt zu setzen. Damit kannst Du sicherstellen, dass Du genau an der Oberkante rauskommst, und musst nicht mühsam an den Richtungsvektoren der beiden Ecken spielen, bis Du „zufällig“ mit dem Bogen die Oberkante triffst.

Gute Idee. Man braucht aber keine kubischen Bezier-Kurven; quadratische genügen völlig. Und der zweite Teil ist die Fortsetzung des ersten, d.h. T/t. (Bei kubischen wäre die Fortsetzung S/s.)

M0 .047 Q.25 0 .5 0 T1 .047 V1 H0 z

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

den Fortsetzungsbefehl habe ich bislang geflissentlich übersehen. Ups?!

Rolf

[Gunnar Bittersmann]

@@x51398

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

In die Beschreibung von clipPathUnits="objectBoundingBox" [MDN] geschaut:

“…and the width and height of the object bounding box are considered to have a length of 1 unit value.”

Die viewBox ist damit hinfällig, kannste weglassen.

Der Pfad der Maske hat ein Seitenverhältnis von 1:1 und wird auf das Seitenverhältnis des Bildes skaliert – mit verschiedenen Faktoren in x- und y-Richtung (wenn das Bild nicht gerade quadratisch ist).

Und wenn du da mit M1,0.469l-1,-0 anfängst, schneidest du den unteren Teil des Bildes ab. Wenn du das nicht willst, musst du schon bei M1,1 anfangen.

Das letzte l-Kommando ist unsinnig, Z/z schließt ja den Pfad.

M1,1l-1,-0l0,-0.422c0.335,-0.063 0.668,-0.063 1,-0Z sollte tun, was du willst.

🖖 Живіть довго і процвітайте

PS: Mir ist der SVGPathEditor ein unverzichtbares Tool geworden – in der CSSBattle. 😊

[x51398]

Vielen Dank für die Infos!

Viele Grüße Sebastian

[Gunnar Bittersmann]

@@Gunnar Bittersmann

M1,1l-1,-0l0,-0.422c0.335,-0.063 0.668,-0.063 1,-0Z sollte tun, was du willst.

Nicht ganz. Da hatte ich vor der Änderung auf 1 glatt vergessen, in absolute Koordinaten umzurechnen. (Wobei der erwähnte SVGPathEditor gute Dienste leistet.)

M1 1 l-1 0 L0 .047 c.335-.063.668-.063 1 0Z.

Für Linien parallel zu den Achsen braucht man übrigens kein l/L; da tut’s auch h/H bzw. v/V:

M1 1 H0 V.047 c.335-.063.668-.063 1 0Z

🖖 Живіть довго і процвітайте