Leider ist Clip-Pfad: Path () immer noch ein No-Go-Go

Anfangs war die Aussicht auf clip-path: path() in Firefox unglaublich aufregend. Stellen Sie sich vor, Sie erstellen mühelos eine dynamische Form, wie das unten gezeigte Atemfeld mit einem einzelnen HTML -Element und minimaler CSS - keine SVGs oder langwierigen Polygonpunktlisten erforderlich!

Dieses Potenzial begeisterte auch Chris. Die Möglichkeiten schienen endlos.

Meine Begeisterung ließ jedoch schnell bei näherer Betrachtung nach. Während clip-path: path() in Firefox fungiert (Versionen 63-70 mit einem bestimmten Flag und 71 ohne), entstand eine signifikante Einschränkung: Die Pfadkoordinaten basieren auf Pixel. Dies bedeutet, dass sie nicht reaktionsmäßig skalieren.

Die MDN -Beispiele unter Verwendung von Pixelwerten in der Funktion path() haben dieses Problem hervorgehoben. Die Funktion path() akzeptiert eine SVG<path></path> String, dessen Koordinaten wie das d -Attribut in SVG unitlose Pixel sind. Im Gegensatz zu SVGs viewBox bleiben diese Pixel in der CSS -Funktion path() festgelegt, wodurch eine reaktionsschnelle Skalierung verhindert wird.

Dies macht die Funktion für reaktionsschnelles Design weitgehend unpraktisch. Ein mit path() abgeschnittenes reaktionsschnelles Element hält unabhängig von seiner Größe einen festen abgeschnittenen Bereich. Zum Beispiel hat eine quadratische Skalierung mit dem Ansichtsfenster eine statischgröße abgeschnittene Herzform.

Diese Einschränkung schränkt die Nützlichkeit von clip-path: path() . SVG- oder Polygon () -Näherungen bleiben für die meisten Szenarien überlegene Alternativen. Verbesserungen sind entscheidend, um clip-path: path() eine praktikable Option zu machen.

Amelia Bellamy-Royds schlug zwei Lösungen vor:

1. Unterstützen Sie calc() Werte/Einheiten in Pfaddaten. Dies würde die SVG -Pfadsyntax erweitern.
2. Führen Sie eine viewBox in die clip-path -Erklärung ein und ermöglichen die Skalierung.

Ich bevorzuge die erste Option. Das zweite bietet bei der Beseitigung der Notwendigkeit separater SVGs einen begrenzten Vorteil gegenüber der direkten Verwendung von SVG, was eine breitere Unterstützung bietet. Die erste Option würde jedoch clip-path: path() und potenziell übertroffene SVG in Bezug auf bestimmte Anwendungen.

Betrachten Sie das Beispiel für Atembox. Die SVG -Implementierung erfordert eine sorgfältige viewBox -Konfiguration, um die Form zu zentrieren. Der SCSS viewBox erzeugt die erforderliche Pfadzeichenfolge.

Durch die Erzeugung eines Atemeffekts müssen jedoch quadratische Bézier -Kurven (q) (q) komplexere Pfaddefinitionen für "geschwollene" und "gequetschte" Zustände erfordern. Dies führt zu langwierigen, sich wiederholenden CSS.

Im Idealfall würde die Verwendung clip-path: path() mit calc() -Ausstützung und benutzerdefinierten Eigenschaften eine dynamische Steuerung über die Form ermöglichen. Eine benutzerdefinierte Eigenschaft, wie --sgn , könnte das Vorzeichen innerhalb von calc() steuern, wodurch die Animation zwischen Zuständen mit einer einzelnen Pfaddefinition ermöglicht wird. Dies würde den Code erheblich vereinfachen und eine reaktionsschnelle Skalierung sicherstellen. Derzeit ist clip-path: path() nicht sein Potenzial.

Das obige ist der detaillierte Inhalt vonLeider ist Clip-Pfad: Path () immer noch ein No-Go-Go. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!