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

Question

我有一个网站与旋转木马滑块库。问题是，每个滑动条都有一个带有边界半径的按钮圆形当我点击一个按钮时，我给它分配" active "类，当它是活动的时候，我让按钮变大。但我也想改变它的形状，让它看起来像一颗星星。我认为将svg与clipPath放在一起会奏效，但我没有成功。如果有人能告诉我如何改变它的形状，如果是任何库或其他东西，这将帮助我很多。

这是我尝试的:

<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%;
}
}

Answer 1

svg元素需要一个viewBox来知道从哪里开始显示内容以及在哪里剪辑它。

在这种情况下，您的viewBox大约是650x650:

.star2svg {
width: 25px;
}

<button>
<svg class="star2svg" viewBox="0 0 650 650">
<path 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"></path>
</svg>
</button>

Answer 2

您可以通过csspath()函数交换/转换svg路径形状。

对于过渡/变形，您需要两个形状具有完全相同数量的命令。Css技巧:Animate SVG Path Changes in Css

圆形和星形之间的转换可以通过以下方式完成:

• 将星径缩小为10个点的多边形
圆角是通过stroke-linecaps/stroke-linejoin属性实现的
• 通过将所有10个点对齐到中心并应用更大的描边宽度来创建初始圆形状:M50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1z

例子

.btn {
appearance: none;
-webkit-appearance: none;
font-size: 10vw;
background: none;
padding: 0;
border: none;
color: #000;
cursor: pointer;
}
.btnSvg {
display: inline-block;
height: 1em;
}
.btn .btnSvgPath {
transition: 0.3s;
border: none;
stroke-width: 75;
stroke-linecap: round;
stroke-linejoin: round;
}
.btn:hover .btnSvgPath {
d: path('M50,77L23.3,91l5.1-29.7l-21.6-21L36.7,36L50,9l13.3,27l29.8,4.3l-21.6,21L76.7,91L50,77z');
stroke-width: 5;
color: gold;
}

<button class="btn">
<svg class="btnSvg" viewBox="0 0 100 100" >
<path class="btnSvgPath" d="M50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1z" fill="currentColor" stroke="currentColor" />
</svg>
</button>