如何使用静态剪切路径为元素设置动画？

Question

我是CSS动画的新手，我想知道如何为带有静态clip-path（id =“ clip_1_”）的元素（id =“ men”）设置动画？剪切路径似乎与我的动画元素一起移动。

* SVG代码是由Adobe Illustrator生成的

请在此处查看此内容： https://codepen.io/hackett-lai/pen/BvMOyg

我的svg剪切路径：

inside __init__
inside setter
inside property
10
---
inside __init__
inside setter
inside property
100

我的CSS：

    <g id="clip_mask">
        <defs>
            <circle id="clip" cx="150" cy="150" r="132.7"/>
        </defs>
        <clipPath id="clip_1_">
            <use xlink:href="#clip"  style="overflow:visible;"/>
        </clipPath>
        <path id="men" class="st1" d="M110.5,225.4L70.9,247c-2.3,1.3-35.8,51.1-37.7,52.8c49.5,0,84.2-0.2,116.8-0.2
            c32.3,0,90.1,0.9,116.6,0.9c-2.1-1.8-36.1-51.9-38.6-53.2L185.6,226c-5.5-2.7-8.9-8.3-8.9-14.5V195c1.2-1.4,2.6-3.1,4-5.2
            c5.8-8.2,10.1-17.1,13.2-26.6c5.4-1.7,9.4-6.7,9.4-12.7v-17.8c0-3.9-1.7-7.4-4.4-9.8V97.3c0,0,5.3-39.9-48.8-39.9
            s-48.8,39.9-48.8,39.9V123c-2.7,2.4-4.4,5.9-4.4,9.8v17.8c0,4.7,2.5,8.8,6.1,11.2c4.4,19.3,16.1,33.2,16.1,33.2v16.2
            C118.9,217.1,115.7,222.5,110.5,225.4z"/>
    </g>

}