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

[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