如何定位由Lottie动画创建的SVG元素？

Question

我试图针对我与CSS的Lottie动画创建的SVG元素，以给它一些Border-Radius。我对JavaScript和CSS的经验不足，我不知道该怎么做。

我已经尝试通过使用以下方式将SVG元素定位为Lottie-player-Element的孩子，因为

lottie-player svg {
border-radius: 9px;
}

我认为这是不起作用的，因为SVG在原始HTML代码中不存在，并且后来通过JavaScript添加。那是对的吗？

您有什么想法如何通过CSS赋予这个动画圆角？

这是一个可以播放的代号： https://codepen.io/kartenhouse/kartenhouse/pen/pen/pen/pen/jjjpmxem

非常感谢您的帮助！

Answer 1

尝试创建父div，然后在那里进行所有CSS属性，而不是将其用于Lottie Player。
就像我所做的。 codepen for参考

父母

<div id="lottie">
  <lottie-player src="https://assets5.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json" speed="1" loop autoplay>
  </lottie-player>
</div>

html： > CSS：将CSS添加到父级，而不是HTML。

#lottie {
  height: 300px;
  width: 300px;
  border: 2px solid red;
  border-radius: 12px;
  z-index: 12;
  background-color: #000000;
}

最终输出看起来像这样

注意：如果您需要Lottie控件，则需要编写自己的逻辑才能使玩家开始和停止动画。