Malheureusement, Clip-path: path () est toujours un non-go

Initialement, la perspective de clip-path: path() dans Firefox était incroyablement excitante. Imaginez en créant sans effort une forme dynamique, comme la boîte de respiration illustrée ci-dessous, en utilisant un seul élément HTML et un CSS minimal - pas de SVG ou de longues listes de points polygonques nécessaires!

Ce potentiel a également ravi Chris. Les possibilités semblaient sans fin.

Cependant, mon enthousiasme a rapidement diminué de plus près. Alors que clip-path: path() fonctionne dans Firefox (versions 63-70 avec un drapeau spécifique activé et 71 sans), une limitation significative est apparue: les coordonnées de chemin sont à base de pixels. Cela signifie qu'ils ne sont pas à l'échelle de manière réactive.

Les exemples MDN, en utilisant des valeurs de pixels dans la fonction path() , ont mis en évidence ce problème. La fonction path() accepte un SVG<path></path> String, dont les coordonnées, comme l'attribut d dans SVG, sont des pixels sans unité. Contrairement à viewBox de SVG, ces pixels restent fixés dans la fonction CSS path() , empêchant la mise à l'échelle réactive.

Cela rend la fonction largement peu pratique pour la conception réactive. Un élément réactif coupé avec path() maintient une zone coupée fixe quelle que soit sa taille. Par exemple, une mise à l'échelle carrée avec la fenêtre aura une forme de cœur coupé de taille statique.

Cette limitation restreint gravement l'utilité du clip-path: path() . Les approximations SVG ou polygon () restent des alternatives supérieures pour la plupart des scénarios. Les améliorations sont cruciales pour faire clip-path: path() une option viable.

Amelia Bellamy-Royds a proposé deux solutions:

1. Prise en charge des valeurs / unités calc() dans les données du chemin. Cela étendrait la syntaxe du chemin SVG.
2. Introduisez une viewBox dans la déclaration de clip-path , permettant la mise à l'échelle.

Je préfère la première option. La seconde, tout en éliminant le besoin de SVG séparés, offre un avantage limité sur l'utilisation directement de SVG, qui bénéficie d'un support plus large. La première option, cependant, améliorerait considérablement clip-path: path() , dépassant potentiellement le SVG avec commodité pour certaines applications.

Considérez l'exemple de la boîte de respiration. L'implémentation SVG nécessite une configuration minutieuse viewBox pour centrer la forme. Le code SCSS, utilisant des commandes viewBox et Path (M, V, H), génère la chaîne de chemin nécessaire.

Cependant, la création d'un effet respiratoire nécessite des courbes de Bézier quadratiques (Q), nécessitant des définitions de chemin plus complexes pour les états "gonflés" et "écrasés". Cela conduit à un CSS long et répétitif.

Idéalement, l'utilisation clip-path: path() avec la prise en charge calc() et les propriétés personnalisées permettraient un contrôle dynamique sur la forme. Une propriété personnalisée, comme --sgn , ​​pourrait contrôler le signe dans calc() , permettant une animation entre les états avec une seule définition de chemin. Cela simplifierait considérablement le code et assurerait une mise à l'échelle réactive. Actuellement, cependant, clip-path: path() ne redevient de son potentiel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!