我正在尝试使用scrollMagic在滚动时制作响应式svg动画，它在Chrome和Opera中运行良好，但Firefox，Edge和IE9中存在一些错误。
Firefox和Edge的问题是当窗口调整到850px或更小时，动画无效，因为起始点随滚动页面开始移动。
IE9的问题在于动画根本无法启动...
这是svg代码：
final Integer param这是动画代码：
<svg class="line" width="800px" height="1300" viewBox="0 0 800 1300">
<defs>
<style type="text/css">
@media screen and (max-width: 1920px) {
.desktopLine {
display: block;
}
.tabletLine {
display: none;
}
}
@media screen and (max-width: 850px) {
.desktopLine {
display: none;
}
.tabletLine {
display: block;
}
}
</style>
</defs>
<g class="desktopLine">
<path class="line1" fill="none" stroke="#fff" stroke-width="2" d="M460,0 L460,93 L535,165 L535,257 L20,257" />
<circle class="circle1" cx="20" cy="257" r="0" fill="#fff" />
<circle class="circle2" cx="20" cy="257" r="0" fill="none" stroke="#fff" stroke-width="2" />
<path class="line2" fill="none" stroke="#fff" stroke-width="2" d="M20,257 L20,567 L95,642" />
<circle class="circle3" cx="95" cy="642" r="0" fill="#fff" stroke="none" />
<path class="line3" fill="none" stroke="#fff" stroke-width="2" d="M75,622 L75,750 L150,750 M70,617 L70,755 L150,755" />
<path class="line4" fill="none" stroke="#fff" stroke-width="2" d="M372,755 L460,755 L470,750 M372,750 L740,750 L770,780" />
<circle class="circle4" cx="770" cy="780" r="0" fill="#fff" stroke="none" />
<path class="line5" fill="none" stroke="#fff" stroke-width="2" d="M690,750 L790,850 L790,1300" />
<path class="pointers" fill="none" stroke="#fff" stroke-width="2" d="M790,867 L775,867 L775,883 L790,883 M775,876 L767,876 M790,923 L775,923 L775,939 L790,939 M775,932 L767,932 M790,979 L775,979 L775,995 L790,995 M775,988 L767,988 M790,1035 L775,1035 L775,1051 L790,1051 M775,1044 L767,1044 M790,1091 L775,1091 L775,1107 L790,1107 M775,1100 L767,1100" />
</g>
<g class="tabletLine">
<path class="line1" fill="none" stroke="#fff" stroke-width="2" d="M550,0 L550,230 L30,230" />
<circle class="circle1" cx="30" cy="230" r="0" fill="#fff" />
<circle class="circle2" cx="30" cy="230" r="0" fill="none" stroke="#fff" stroke-width="2" />
</g>
</svg>
感谢您的帮助!!