如何为SVG元素中定义的剪切路径设置动画？

Question

我知道如何为直接在CSS中定义的剪切路径设置动画，但是当从SVG clipPath元素referenced剪切路径时，我不明白该如何做。

我一直在仅使用CSS进行简单的剪切路径动画的实验，直到我意识到您无法直接在其中定义compound-path作为剪切路径，所以我转向SVG的clipPath，它允许定义多个路径。但是然后animation不起作用，也就是说，没有平滑过渡。

这是我正在尝试的内容...

HTML

<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%, 120% 5%, 149% 95%, 119% 95%) }
}

可以正常工作，但是我想将SVG用于更复杂的复合路径。

感谢您的时间和事先的帮助！

Answer 1

您需要使用animate对SVG本身进行动画处理>

animate
.box {
  width:300px;
  height:200px;
  background:red;
  clip-path: url(#shape--start);
}