不幸的是，剪辑路径：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中文网其他相关文章！