Question

import React, { Component }  from 'react';
import './App.css';
import { ReactComponent as Petri } from './petri-dish.svg';

const App = () => {

    return (
        <svg>
            <Petri />
        </svg>
    );
}
export default App;

我已将svg导入为React组件（Petri）。我找不到任何示例来帮助我使用GSAP对该组件进行动画处理。任何帮助将不胜感激。

Answer 1

一种方法是为svg组件创建forwardRef，然后根据需要使用.current属性进行操作。

请参见下面的最小示例：

const SVG = React.forwardRef((props, ref) => (
    <svg ref={ref} version="1.1" id="svg" className="container" width="260" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 200" >
      <rect id="svgRectangle" className="animated" x="20" y="60" width="220" height="80" fill="#91e600"/>
    </svg>
));

function App() {
  const svgRef = useRef(null);

  useEffect(() => {
      TweenLite.to(svgRef.current, 2, {opacity: 0});
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <SVG ref={svgRef} />
      </header>
    </div>
  );
}

JSFiddle Here

有没有一种方法可以使用GreenSock（GSAP）为React中的SVG组件设置动画？

1 个答案: