Javascript 如何将svg动画转换为在scroll上工作？

我创建了4个动画，其中2个是沿着路径移动的正方形。2是未绘制的线

我想知道我是否可以将这些动画转换为滚动，而不是像贝娄那样的持续时间

我试图找到，但我不认为这4个动画可以滚动

评论中的任何想法都会有帮助

//示例类组件
类Svg扩展了React.Component{
render（）{
返回(
);
}
}
ReactDOM.render(
,
document.getElementById（“react”）
);
注册滚动事件侦听器，为组件分配值状态，并为svg分配相应的值

class Svg extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      end: 1
    }
    this.scroll = this.scroll.bind(this)

    window.addEventListener('scroll', this.scroll, true);
  }

  scroll(event) {
    this.setState({
      end: window.scrollY > 100? 0 : (1 - window.scrollY / 100)
    });
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.scroll, true);
  }


  render() {
    return (
<div style={{height: '200vh'}}>
    <svg viewBox="0 0 1200 700" width="100%" height="700" xmlSpace="preserve">
        <defs>
            <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="shadow-filter">
                <feOffset dx="0" dy="20" in="SourceAlpha" result="shadowOffsetOuter1" />
                <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
                <feColorMatrix values="0.1 0 0 0 0   0 0.2 0 0 0   0 0 0.1 0 0   0 0 0 0.1 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1" />
                <feMerge>
                    <feMergeNode in="shadowMatrixOuter1" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
            </filter>
        </defs>
        <g>
            <path
                d="M544.9,635c-1.2-172.5-2.3-345-3.5-517.5c-0.3-7.8-2.6-21.2-14.1-32.6c-11.7-11.5-28.5-20-57.5-20
                                    c-18.9,0-78.4,0-97.3,0c-64.3,0-138,0-202.4,0h-4.1"
                id="Clasque_3"
                stroke="rgba(196, 196, 194, .2)" strokeWidth="3" strokeMiterlimit="10" fill="none" strokeDasharray="920.2" strokeDashoffset="0"
            > <animate
                  attributeName="stroke-dashoffset"
                  values={`${(1 - this.state.end)  * 920};${(1 - this.state.end) * 920} ;`}
                  dur="4s"
                  repeatCount="indefinite"
                />
            </path>
            <rect className="rect1" x="-35" y="-35" rx="15" ry="15" width="70" height="70" strokeWidth="1" stroke="rgba(196, 196, 194, .1)" fill="#F8F7F5" filter="url(#shadow-filter)" >
                <animateMotion
                    dur="1s"
                    keyPoints={`${this.state.end};${this.state.end}`}
                    keyTimes="0;1"
                    calcMode="linear"
                    repeatCount="indefinite"
                    >
                    <mpath xlinkHref="#Clasque_3"></mpath>
                </animateMotion>
            </rect>
        </g>
        <g>
            <path
                d="M655.4,635c1.2-172.5,2.3-345,3.5-517.5c0.3-7.8,2.6-21.2,14.1-32.6c11.7-11.5,28.5-20,57.5-20
                                    c18.9,0,78.4,0,97.3,0c64.3,0,138,0,202.4,0h4.1"
                id="Clasque_6"
                stroke="rgba(196, 196, 194, .2)" strokeWidth="3" strokeMiterlimit="10" fill="none" strokeDasharray="920.2" strokeDashoffset="0"
            ><animate
                    attributeName="stroke-dashoffset"
                    values={`${(1 - this.state.end)  * 920};${(1 - this.state.end) * 920} ;`}
                    dur="4s"
                    repeatCount="indefinite"
                />
            </path>
            <rect x="-35" y="-35" rx="15" ry="15" width="70" height="70" strokeWidth="1" stroke="rgba(196, 196, 194, .1)" fill="#F8F7F5" filter="url(#shadow-filter)" >
                <animateMotion
                    dur="1s"
                    keyPoints={`${this.state.end};${this.state.end}`}
                    keyTimes="0;1"
                    calcMode="linear"
                    repeatCount="indefinite"
                    >
                    <mpath xlinkHref="#Clasque_6"></mpath>
                </animateMotion>
            </rect>
        </g>
    </svg>
</div>
    );
  }
}


类Svg扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
完:1
}
this.scroll=this.scroll.bind（this）
window.addEventListener（'scroll'，this.scroll，true）；
}
滚动（事件）{
这是我的国家({
结束：window.scrollY>100？0:（1-window.scrollY/100）
});
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.scroll，true）；
}
render（）{
返回(
);
}
}