Javascript 使用自定义 svg 更改按钮的形状

我有一个带有 carousel 滑块库的网站.问题是，每个滑块都有一个带有边框半径的按钮圆，当我单击一个按钮时，我会将其指定为"活动"类，因此当处于活动状态时，我会将按钮变大.但我也想改变它的形状，让它看起来像一颗星星.我以为把svg和clipPath放在一起会成功，但我没有成功.如果有人能告诉我如何改变它的形状，如果是任何图书馆或什么的，这将对我有很大帮助.

以下是我try 过的:

<button>
    <svg class="star2svg">
        <defs>
            <clipPath id="clipStar">
                <path class="star2" id="star2" d="M325.07,30.69l80.91,163.95l180.93,26.29c18.09,2.63,25.31,24.86,12.22,37.62L468.22,386.16l30.91,180.2
                c3.09,18.02-15.82,31.76-32,23.25l-161.83-85.08l-161.83,85.08c-16.18,8.51-35.09-5.23-32-23.25l30.91-180.2L11.45,258.55
                c-13.09-12.76-5.87-34.99,12.22-37.62l180.93-26.29l80.91-163.95C293.61,14.3,316.98,14.3,325.07,30.69z"/>
            </clipPath>
        </defs>
    </svg>
</button>

我想这样做:

button {
    width: 0.8em;
    height: 0.8em;
    border: none;
    border-radius: 50%;
    transition: 0.2s ease-out;
    position: relative;
    clip-path: url('#clipStar');

    .star2svg {
        position: absolute;
        left: 0;
        right: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
}