0
142
Views¿Cómo apuntar al elemento svg creado por una animación de Lottie?
Estoy tratando de apuntar al elemento svg creado por mi lottie-animation con CSS para darle un radio de borde. Siendo bastante inexperto con JavaScript y CSS, no pude encontrar la manera de hacerlo.
Ya intenté apuntar al elemento svg como elemento secundario del elemento jugador de lotería usando:
lottie-player svg { border-radius: 9px; }Supongo que esto no funciona, porque el svg no está presente en el código HTML original y solo se agregó más tarde a través de JavaScript. ¿Es eso correcto?
¿Tienes alguna idea de cómo dar esquinas redondeadas a esta animación, idealmente a través de CSS?
Aquí hay un codepen para jugar: https://codepen.io/Kartenhouse/pen/JjpmXem
¡Muchas gracias por tu ayuda!
1 answers
Answer question0
Intente crear un div principal y haga todas las propiedades CSS allí en lugar de jugar al jugador. Como lo que he hecho. Codepen para referencia
HTML: padre del jugador de lotería
<div id="lottie"> <lottie-player src="https://assets5.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json" speed="1" loop autoplay> </lottie-player> </div>CSS: se agregó CSS al div principal en lugar de HTML.
#lottie { height: 300px; width: 300px; border: 2px solid red; border-radius: 12px; z-index: 12; background-color: #000000; }El resultado final se ve así
Nota: si necesita controles de lotería, debe escribir su propia lógica para que el jugador inicie y detenga la animación.