search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.35k stars 2.87k forks source link

Put lottie animation inside an svg #2453

Open forno96 opened 3 years ago

forno96 commented 3 years ago

Hi! I would put a plotty animation inside a css content

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"/>
  <lottie-player src="/static/animation/barChart.json" background="transparent" speed="1" loop="" autoplay=""></lottie-player>    
</svg>

But the lottie player js produces

lottie-player.js:38 Uncaught TypeError: t.getContext is not a function
    at lottie-player.js:38
    at lottie-player.js:38
    at lottie-player.js:38
    at lottie-player.js:38
    at Object.parcelRequire.xaRr (lottie-player.js:38)
    at f (lottie-player.js:1)
    at p (lottie-player.js:1)
    at Object.parcelRequire.M8c7.lit-element (lottie-player.js:42)
    at f (lottie-player.js:1)
    at parcelRequire.ytxR (lottie-player.js:1)

So, there is a way for pack all inside a svg o there is no possibility?

bodymovin commented 3 years ago

hi, I don't know the lottie-player limitations since I'm not the maintainer, but using the lottie-web library, you should be able to add your animation inside another svg.

chungmarcoo commented 3 years ago

I am able to add a lottie inside svg using . However the styling of the lottie seems no longer works. And it cannot fit into the foreignObejct size. Not sure it is iOS safari issue or not. Can anyone help? Thanks a lot.