Tengo un sitio web con una biblioteca de controles deslizantes de carrusel. La cuestión es que cada control deslizante tiene un botón en forma de círculo con un radio de borde y cuando hago clic en un botón, le asigno la clase 'activa', por lo que cuando está activo hago que el botón sea más grande. Pero también quiero cambiar su forma, para que parezca una estrella. Pensé que poner un svg con clipPath sería el truco, pero no funcionó. Si alguien pudiera decirme cómo hacer que cambie su forma, si es una biblioteca o algo así, me ayudaría mucho.
Esto es lo que probé:
<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>Y quería darle estilo de esta manera:
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%; } }El elemento svg necesita un viewBox para saber dónde comenzar a mostrar el contenido y dónde recortarlo.
En este caso, su viewBox es de aproximadamente 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>Puede intercambiar/transicionar la forma de la ruta svg a través de la función css path() .
Para transiciones/morphing, necesita que ambas formas tengan exactamente el mismo número de comandos. Trucos CSS: Animar cambios de ruta SVG en CSS
La transición entre un círculo y una estrella se puede hacer de la siguiente manera:
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>