Clip-path: Path() 的初始实现 | CSS-Tricks

我一直感到惊讶（和悲伤）的是，clip-path 属性虽然很棒，但只接受少量值。circle() 和 ellipse() 函数很好，但使用 border-radius 隐藏溢出和圆角通常已经可以做到。可能最有用的值是 polygon()，因为它允许我们用任意点的直线绘制形状。

更新：现在所有三个浏览器引擎都支持 clip-path: path()。太棒了！

下面是每个值的演示

令人沮丧的是，clip-path 不接受 path()。它明明带了 path！路径语法来自 SVG，是终极语法。它允许我们绘制任何形状。

更令人困惑的是，已经存在一个 path() 函数，这是诸如 offset-path 等属性所接受的。

我曾经对这一切感到非常震惊，以至于我把它变成了一个完整的会议演讲。

演讲提到了 shape-outside 属性，以及它无法使用 path()。它还提到了我们可以更改文字 <path> 的 d 属性。

不过我不怪任何人。这很奇怪，并且由不同的团队实现，不可避免地会导致不同的结果。即使 SVG 在 <path d=""> 语法中使用无单位的值也是有点奇怪，并且在 CSS 领域是一种异常。它的行为方式、带单位的值如何表现、允许和禁止使用什么逗号语法，以及 DOM 在被询问时返回的内容，足以让你头晕。

总之！Firefox 推出了实现！

有人知道 clip-path: path() 是否在 Chrome 中隐藏在某个标记后面。我似乎找不到，但它们确实支持 offset-path: path()，所以我认为它们会同时支持两者。
感谢 @CSS 和 @ChromiumDev 朋友们。https://#/YTmwcnilRB 在 FF 中的标记后面运行。Chrome 呢？
— Estelle Weyl (@estellevw) 2018 年 9 月 13 日

支持

这是 Firefox 中的标记 (layout.css.clip-path-path.enabled)

更新！

今天在 Firefox 71 中发布 — 支持在 CSS 中使用 SVG path() 语法与剪切路径一起使用。
是的 — 现在可以这样做了
clip-path: path(‘M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z’);
— Jen Simmons (@jensimmons) 2019 年 12 月 3 日

下面是一个演示…

您将在不支持的浏览器中看到一个正方形，而在支持 clip-path: path(); 的浏览器中看到一个心形 — 在撰写本文时，这仅限于启用了标记的 Firefox Nightly。

A screenshot of clip-path: path() working in Firefox Nightly

现在，我们只需要

clip-path 能够指向 SVG 中 <path> 的 URL，例如 url("#clip-path");
shape-outside 能够使用 path()
shape-outside 能够指向 <path>
offset-path 能够接受所有其他形状函数
可能需要很多规范才能确保这一切都能得到干净的处理（祝好运，团队！）
浏览器来实现这一切

😉

Amelia BR

# 2018 年 12 月 24 日

（我最初是在 Twitter 上发表的评论，但它变成了一个主题，所以我认为它更适合在这里发表！然后，当我在这里写完之后，我意识到为了收集反馈，它也应该在工作组的问题跟踪器上发布。所以它被复制到那里，请添加你的投票：https://github.com/w3c/csswg-drafts/issues/3468）

## 关于：“很多规范 — 祝好运，团队！”

棘手的部分是填充规则。polygon() 函数包含填充规则关键字作为可选的第一个参数

clip-path: polygon(evenodd, 
    50% 0, 0 0, 50% 100%, 100% 0, 50% 0, 0 100%, 100% 100%, 50% 0);

但是 <path> 元素使用由 fill-rule 或 clip-rule 属性设置的关键字，具体取决于形状的上下文。因此，在 d 属性中包含关键字会导致冲突。

目前针对 offset-path 规范的 path() 函数不包含关键字参数，因为运动只使用轮廓，而不是填充。

我们已经同意将该语法用于 d（<path> 形状）作为属性。

但对于 clip-path（以及将来的 shape-inside 等用来定义文本环绕区域为形状的东西），我们需要知道使用哪个填充规则。

我考虑过的一个想法（但我从未写下来）是定义两种不同的 CSS 数据类型，其中一种是另一种的超类

<outline-shape> 不包含填充规则关键字
<filled-shape> = <outline-shape>（使用默认填充规则） | polygon() 和 path() 带有关键字

因此，d 属性将接受一个 <outline-shape> 函数，不允许使用关键字，并且仍然使用 fill-rule/clip-rule 属性，不会发生冲突。

另一个选择是在函数中的关键字中定义一个 auto 值，并将其设为默认值。在 clip-path 中，auto 值的行为与当前默认值（nonzero）相同，但在 d 中，它的行为将是“根据上下文检查 fill-rule 或 clip-rule 属性，并使用该属性”。如果您确实在 d 中的函数中指定了不同的关键字，它将覆盖其他属性

.even-odd {
  fill-rule: non-zero; /* ignored if the `d` value is supported */
  clip-rule: non-zero; /* ditto */
  d: path(even-odd, "M0,0 C80,40 -30,40 50,0 L25,50 Z");
}

在我看来，一个额外的好处是，这意味着我们可以长期计划弃用 fill-rule / clip-rule 属性的使用，这些属性在它们依赖于上下文的方式上已经非常令人讨厌。如果您想要在 CSS 函数表示法中使用特定于上下文的关键字值，您可以使用继承的 CSS 变量值。

但这些方法中最重要的好处是，它们将允许所有形状函数（可能减去填充规则关键字）在所有与形状相关的属性中使用！！！

如果您对以上任何内容有任何意见，请告知我们（CSS/SVG 编辑）和浏览器团队！目前，我真的很想选择一个选项，以便我们可以在所有相关属性中获得完整的形状函数集

https://github.com/w3c/csswg-drafts/issues/3468#issuecomment-449760438

仍然有一些其他与规范相关的内容需要整理，例如动画规则以及调用 getComputedStyle() 或以其他方式从 DOM 序列化时路径字符串的语法将被规范化的程度。但在这方面并没有太多分歧，只是细节问题。

（好吧，还有很多我想看到的未来增强功能，比如能够连接存储在变量中的多个路径字符串，或者在路径中使用单位。但那是以后的事……）

Amelia BR

# 2018 年 12 月 24 日

顺便说一句，我对能够在 shape-outside 中使用 SVG <clipPath> 元素的想法很感兴趣。

在 SVG 2（目前正在推迟到 SVG Sometime 的部分）中，计划是 shape-outside 和 shape-inside 可以直接引用单个 SVG 形状元素（例如 <path>）。但也许引用 <clipPath> 更有意义，因为 clipPath 已经定义了将其缩放以适合引用元素的规则？

总之，如果您对该特定建议有更多想法，Chris，我很乐意在官方问题跟踪器中看到它们。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。