随着Chrome 88的发布，我们得到了对clip-path: path() 的支持。这意味着它现在在 "大多数 "主要浏览器中得到了支持
有了path() ，我们就能为clip-path 。（你可以在这里补习一下什么是clip-path ）。这些路径定义字符串与我们可以使用SVG路径元素的字符串相同。这一点很酷，因为它提供了一种创建形状的方法，而在以前，这可能意味着使用SVG。我们甚至可以在不需要任何技巧的情况下创建断裂的路径。
随着支持的增加，我们有机会尝试一些有趣的东西让我们制作 "吱吱作响的人像 "吧这是一个使用clip-path: path() ，将一个元素的可视区域剪辑成这些 "Nickelodeon-esque "的飞溅物的有趣方法。
"Squeaky Portraits 👇😅"
还没玩完CSS clip-path: path() 😂
瞄准了一个水花，但最终还是选择了一个吱吱作响的声音效果 😆
由范围内的变量提供动力!💪
(有声音更好👍)
👉t.co/Nuqyivpm5Yvia@CodePen pic.twitter.com/TCCouglKpd
- Jhey 🐻🛠（@jh3yy）2021年2月12日
创建一个路径
首先，我们需要自己的SVG风格的路径定义字符串。在这种情况下，我们需要不止一个。clip-path 的巧妙之处在于，我们可以用CSS来过渡它们。只要clip-path 函数和节点的数量一致，我们就可以过渡。
为了制作一些路径，我们可以在任何矢量图形编辑器中跳转。在这个例子中，我使用的是Figma。而不是从头开始创建路径，我们可以使用一个想要的 "飞溅 "作为基础。这个看起来不错!
这里的诀窍是在基础花纹的基础上创建更多的花纹。我们需要在不引入或删除任何节点的情况下做到这一点。这是我想出的三个花板。但是，只要你遵守这个规则，你可以做任何你喜欢的形状!
你可能会注意到，第三个斑点有两个从主形状中分离出来的斑点。这很好，因为SVG的路径定义允许我们这样做。我们可以开始一条线，关闭它，然后移动到另一个点，开始另一条。
但是我不是说过他们需要一个一致的点的数量吗？他们确实如此。而这就是我们在这里的情况!每一个斑点都会出现这两个斑点。但诀窍在于，我们可以在不需要它们的时候将它们移到路径的其他部分后面。
一旦我们有了斑点，我们就可以导出它们，并抓住路径定义的字符串。
应用拼板
为了应用拼接，我们要为每个路径创建变量:
.portrait {
--splat: "M161 188.375C170 193.5 177.919 193.854 186 188.375C197.919 180.294...";
--splattier: "M161 188.375C170 193.5 177.919 193.854 186 188.375C197.919...";
--splatted: "M232.5 256C225 251 209.5 262.5 224 281.5C232.736 292.948...";
}
这些是我们直接从导出的SVG中提取的路径。
我们将使用 "splat"、"splattier "和 "splatted "的名字。给事物命名是很难的。哈!但是，以 "splatted "SVG为例:
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M232.5 256C225 251 209.5 262.5 224 281.5C232.736 292.948 238.561 297.756 251 290.5C257 287 256.114 271.924 250 264.5C243.886 257.076 240 261 232.5 256ZM147 92.5C118.738 94.6708 118 17 93 44C68 71 123.543 76.5 108 101.5C90.5 115 70.81 98.3664 64 115C56.7766 132.643 91.1967 136.948 90.5 156C89.4406 184.974 19.1766 161.499 24.5 190C29.9178 219.006 78.6461 172.635 100 193C130.207 221.808 1 248.5 58.5 291.5C94.5576 318.465 114.991 206.551 140.5 211C183.5 218.5 134.5 294 186.5 279.5C207.5 273 174.638 224.658 196 204C223.117 177.777 275.916 253 291.5 218.5C311.375 174.5 228.698 194.565 224 160C219.553 127.282 291.5 123.5 267.5 87.5C238.5 57 247 125.5 196 105.5C147 92.5 229.5 13.5 173.5 2.5C140.5 2.49999 183.532 89.694 147 92.5ZM45 92.5C36.8766 80.3149 14.1234 75.3149 6.00001 87.5C0.584412 95.6234 2.00001 120.357 14.5 115C27.9606 109.231 36.8766 124.685 45 112.5C50.4156 104.377 50.4156 100.623 45 92.5Z" fill="#A91CFF"/>
</svg>
我们要从path 元素中取出d 属性，并为它们创建CSS变量。接下来，我们需要一个元素来应用这些变量。让我们创建一个类别为 "肖像 "的元素:
<div class="portrait"></div>
接下来，给它应用一些样式:
.portrait {
--splat: "M161 188.375C170 193.5 177.919 193.854 186 188.375C197.919 180.294...";
--splattier: "M161 188.375C170 193.5 177.919 193.854 186 188.375C197.919...";
--splatted: "M232.5 256C225 251 209.5 262.5 224 281.5C232.736 292.948...";
--none: "";
height: 300px;
width: 300px;
background: #daa3f5;
clip-path: path(var(--clip, var(--none)));
transition: clip-path 0.2s;
}
然后我们就可以开始了这里有一个演示，你可以在不同的剪辑状态之间切换。
注意形状是如何在三种夹子形状之间转换的。但是，也请注意我们如何给我们的元素一个明确的高度和宽度。这个尺寸与我们导出的SVG的尺寸相匹配。这一点很重要。这是使用clip-path: path() 的一个缺点。它不是响应式的。路径定义是相对于你的元素的尺寸而言的。这与CSS运动路径所面临的问题相同。
如果我们注意到我们要剪切的东西的尺寸，这就很好。我们还可以为不同的视口尺寸创建不同的路径变量。但是，如果你的图片是以流动的方式调整大小的，那么使用SVG的其他解决方案将更加稳健。
互动性
在我们的演示中，我们希望飞溅物是互动的。我们可以单独用CSS来实现这一点。我们可以使用一个范围内的CSS变量----clip --来控制当前的剪辑。然后我们可以在:hover 和:active 上更新这个变量。当我们把指针按下去时，--active 状态就会被触发。
.portrait {
clip-path: path(var(--clip, var(--splat)));
}
.portrait:hover {
--clip: var(--splattier);
}
.portrait:active {
--clip: var(--splatted);
}
把这些扔在一起，我们就得到了这样的东西。试着把鼠标悬停在飞溅物上并按下它。
添加一些字符
现在，我们可以转换水花了，它需要一点额外的东西。如果我们在这些状态下也对它进行转换呢？
.portrait {
transition: clip-path 0.2s, transform 0.2s;
transform: scale(var(--scale, 1)) rotate(var(--rotate, 0deg));
}
.portrait:hover {
--scale: 1.15;
--rotate: 30deg;
}
.portrait:active {
--scale: 0.85;
--rotate: -10deg;
}
使用范围内的CSS变量来应用一个transform ，我们可以添加一些东西。在这里，我们更新了我们图案的scale 和rotation 。我们可以试验不同的值，并在这里玩不同的效果。把元素翻译一下可能看起来不错？
