Using lottie-react-web, Im getting the following console error: <svg> attribute viewBox: Expected number, "0 0 undefined undefined

Question

我已经从 lottie-react-web 包中创建了一个组件。

import React from 'react';
import Lottie from 'lottie-react-web'
import animation from '../../src/animations/anim.json'

const LottieAnim = () => (
  <Lottie
    options = {{
      animationData: animation,
      loop: false,
      autoplay: true,
    }}
    width = "60px"
    height = "60px"
  />
)

export default LottieAnim

这有效并成功构建。当 DOM 加载时，它会生成具有已定义属性的包装器 div。但是，div 中的 svg 没有定义的视图框参数，以及未定义的宽度和高度，以及 svg 中的包含向量。

Answer 1

应该是animationData: animationData.default

参见：https://github.com/chenqingspring/vue-lottie/issues/20

Answer 2

是的，对于 TypeScript，最好这样做

import { default as animationData } from '../animation-with-blackjack-and-hooks.json'

然后

  const defaultOptions:Options = {
    loop: true,
    autoplay: true, 
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: 'xMidYMid slice'
    }
  };```

Using lottie-react-web, Im getting the following console error: <svg> attribute viewBox: Expected number, "0 0 undefined undefined

Using lottie-react-web, Im getting the following console error: <svg> attribute viewBox: Expected number, "0 0 undefined undefined

svg

json

reactjs

lottie