0
152
ViewsHow to target the svg-element created by a Lottie animation?
I'm trying to target the svg-element that's created by my lottie-animation with CSS to give it some border-radius. Being rather unexperienced with JavaScript and CSS, I couldn't figure out how to do it.
I've already tried targeting the svg-element as a child of the lottie-player-element by using:
lottie-player svg {
border-radius: 9px;
}
I assume this doesn't work, because the svg isn't present in the original HTML code and only added later through JavaScript. Is that correct?
Do you have any ideas how to give this animation rounded corners, ideally through CSS?
Here's a codepen to play around with: https://codepen.io/Kartenhouse/pen/JjpmXem
Thanks a lot for your help!
1 answers
Answer question0
Try creating a parent div and do all CSS properties there instead to lottie player. Like what I have done. Codepen for reference
HTML : Parented the lottie player
<div id="lottie">
<lottie-player src="https://assets5.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json" speed="1" loop autoplay>
</lottie-player>
</div>
CSS : Added CSS to parent div instead of HTML.
#lottie {
height: 300px;
width: 300px;
border: 2px solid red;
border-radius: 12px;
z-index: 12;
background-color: #000000;
}
The final output looks like this
Note: If you need lottie controls then you need to write your own logic for player to start and stop animation.