不幸的是，剪輯路徑：path（）仍然是不做的

最初，Firefox中的clip-path: path()非常令人興奮。想像一下，使用單個HTML元素和最小CSS（無需SVG或冗長的多邊形點列表），毫不費力地創建動態形狀，例如下面顯示的呼吸框！

這種潛力也使克里斯感到興奮。可能性似乎無窮無盡。

但是，在仔細檢查時，我的熱情迅速減弱。雖然clip-path: path()在Firefox中起作用（啟用特定標誌的版本63-70，而無需71個），但出現了一個顯著的限制：路徑坐標是基於像素的。這意味著他們不會響應地擴展。

使用path()函數中的像素值的MDN示例突出了此問題。 path()函數接受SVG<path></path>字符串，其坐標，例如SVG中的d屬性，是無單位像素。與SVG的viewBox不同，這些像素保持固定在CSS path()函數中，以防止響應縮放。

這在響應式設計中使該功能在很大程度上不切實際。用path()剪切的響應元素可保持固定的剪裁區域，無論其尺寸如何。例如，帶有視口的正方形縮放將具有靜態大小的剪裁心形。

這種限制嚴重限制了clip-path: path() 。對於大多數情況，SVG或Polygon（）近似值仍然是優越的替代方法。改進對於使clip-path: path()成為可行的選擇至關重要。

Amelia Bellamy-Royds提出了兩種解決方案：

1. 支持calc()值/單位路徑數據中。這將擴展SVG路徑語法。
2. 在clip-path聲明中引入一個viewBox ，以縮放。

我贊成第一個選項。第二，在消除對單獨的SVG的需求的同時，與直接使用SVG相比，它具有有限的優勢，這具有更廣泛的支持。但是，第一種選擇將顯著增強clip-path: path() ，在某些應用方面可能會超過SVG。

考慮呼吸盒示例。 SVG實現需要仔細的viewBox配置以將形狀居中。使用viewBox和Path命令（M，V，H）的SCSS代碼生成必要的路徑字符串。

但是，產生呼吸效果需要二次Bézier曲線（Q），需要對“腫脹”和“擠壓”狀態進行更複雜的路徑定義。這導致了冗長的重複CSS。

理想情況下，使用clip-path: path()帶有calc()支持和自定義屬性的path（）將允許對形狀進行動態控制。像--sgn這樣的自定義屬性可以控制calc()中的符號，從而在具有單個路徑定義的狀態之間啟用動畫。這將大大簡化代碼並確保響應量的擴展。但是，目前， clip-path: path()的潛力不足。

以上是不幸的是，剪輯路徑：path（）仍然是不做的的詳細內容。更多資訊請關注PHP中文網其他相關文章！