0
226
VistasAnimación de ruta de botón svg
Tengo este botón SVG que estoy tratando de animar al pasar el mouse. Quiero que el botón tenga un efecto de gota al pasar el mouse. Espero que me puedan ayudar. Aquí está el enlace al SVG
https://codepen.io/haroldhall/pen/ZEJWJqo
<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 169.5451 69.2823"> <defs> <style> .fbfb67fb-85bf-41e7-ba32-d1082da05d29 { fill: #ff83b5; } </style> </defs> <g id="ee4ac112-3396-4e4b-9bd2-9cf074846425" data-name="Layer 2"> <g id="b0f8822e-1e1e-4dce-a2e6-9a8bebf20196" data-name="Background"> <path id="original" class="fbfb67fb-85bf-41e7-ba32-d1082da05d29" d="M76.9857,59.1319C52.7693,55.9614,1.16,89.3257.01,40.4447-.7354,8.7354,38.7113-11.033,76.1673,6.64c33.8056,15.9511,84.1836-17.2117,85.0374,23.6112C162.2335,79.4411,111.2431,65.3513,76.9857,59.1319Z" /> </g> </g> </svg>2 Respuestas
Responde la pregunta0
Regla CSS d: path (" M76 .....); actualmente no es compatible con la especificación W3C SVG. Hasta ahora, esta es solo una tecnología experimental de navegadores basados en el motor Blink.
Por lo tanto, una solución basada en la rule d: ruta` no será multinavegador, por ejemplo, Firefox no funciona.
Considere una solución con SVG SMIL.
Soporte SMIL
Para transformar los contornos del botón, debe crear una ruta final en el editor de vectores en forma de gota
Las siguientes figuras muestran el proceso de obtención de la path final en el editor de vectores.
Tome el punto de anclaje y arrástrelo hacia abajo hasta obtener la forma deseada.
Guarde el archivo svg y copie la ruta final al comando de animación morph.
A continuación se muestra el código para animar la transformación del contorno del botón en forma de gota:
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 169.5451 69.2823"> <defs> <style> .fbfb67fb-85bf-41e7-ba32-d1082da05d29 { fill: #ff83b5; } </style> </defs> <g id="ee4ac112-3396-4e4b-9bd2-9cf074846425" data-name="Layer 2"> <g id="b0f8822e-1e1e-4dce-a2e6-9a8bebf20196" data-name="Background"> <path id="original" class="fbfb67fb-85bf-41e7-ba32-d1082da05d29" d="M77 59C53 56 1 89 0 40-1 9 39-11 76 7c34 16 84-18 85 23 1 49-50 35-84 29Z" > <animate attributeName="d" begin="original.mouseover" dur="1s" fill="freeze" restart="WhenNotActive" values=" M77 59C53 56 1 89 0 40-1 9 39-11 76 7c34 16 84-18 85 23 1 49-50 35-84 29Z; M81 113C57 110 1 89 0 40-1 9 39-11 76 7c34 16 84-18 85 23 1 49-45 89-80 83z" /> </path> </g> </g> </svg>0
no estoy seguro de qué tipo de efecto de blob está buscando tener, pero puede hacerlo con JS o CSS. Ambos implican cambiar el camino a las nuevas posiciones deseadas. Incluyo un ejemplo que cambia un poco al pasar el mouse. Si necesita ayuda para crear un blob, le recomiendo https://www.blobmaker.app/
svg #original { transition: all 0.5s; } svg:hover #original { d: path("M76.9857,59.1319C52.7693,55.9614,1.16,189.3257.01,40.4447-.7354,8.7354,38.7113-11.033,76.1673,6.64c33.8056,15.9511,84.1836-17.2117,85.0374,23.6112C162.2335,179.4411,11.2431,65.3513,76.9857,59.1319Z"); } <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 169.5451 69.2823"><defs><style>.fbfb67fb-85bf-41e7-ba32-d1082da05d29{fill:#ff83b5;}</style></defs><g id="ee4ac112-3396-4e4b-9bd2-9cf074846425" data-name="Layer 2"><g id="b0f8822e-1e1e-4dce-a2e6-9a8bebf20196" data-name="Background"><path id="original" class="fbfb67fb-85bf-41e7-ba32-d1082da05d29" d="M76.9857,59.1319C52.7693,55.9614,1.16,89.3257.01,40.4447-.7354,8.7354,38.7113-11.033,76.1673,6.64c33.8056,15.9511,84.1836-17.2117,85.0374,23.6112C162.2335,79.4411,111.2431,65.3513,76.9857,59.1319Z"/> </g></g></svg>