小编Osa*_*iaf的帖子

我知道如何对直接在 CSS 中定义的剪辑路径进行动画处理，但我不明白当从 SVG ClipPath 元素引用剪辑路径时如何执行此操作。

我一直在尝试仅使用 CSS 制作简单的剪辑路径动画，直到我意识到无法直接将复合路径定义为剪辑路径，因此我转向了 SVG 的允许定义多个路径的 ClipPath。但是这样动画就不行了，就是没有平滑过渡。

这就是我正在尝试的...

超文本标记语言

<svg>
    <defs>
        <clipPath id="shape--start">
            <polygon points="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778"/>
        </clipPath>
        <clipPath id="shape--end">
            <polygon points="144.444,-44.444 166.667,-11.111 152.778,2.778 130.556,-30.556 97.222,-52.778 111.111,-66.667"/>
        </clipPath>
    </defs>
</svg>

CSS

@keyframes shape {
    0% { clip-path: url(#shape--start) }
    100% { clip-path: url(#shape--end) }
}

为了澄清更多，如果我使用类似的东西

CSS

@keyframes shape {
    0% { clip-path: polygon(-44% 5%, -14% 5%, 15% 95%, -15% 95%) }
    100% { clip-path: polygon(90% 5%, …