SVG`<；路径>；`javascript动画未按预期工作

我所取得的成就：

//获取元素的id和元素的长度
var myline=document.getElementById（“myline”）；
var length=myline.getTotalLength（）；
圆圈=document.getElementById（“圆圈”）；
//图形的起始位置
myline.style.strokeDasharray=长度；
//通过偏移虚线隐藏三角形。在滚动绘制之前，删除此线以显示三角形
myline.style.strokedashcoffset=长度；
//查找滚动上的滚动百分比（使用跨浏览器属性），并偏移与滚动百分比相同的量
addEventListener（“滚动”，myFunction）；
函数myFunction（）{
//降价多少？
变量scrollpercent=（document.body.scrollTop+document.documentElement.scrollTop）/（document.documentElement.scrollHeight-document.documentElement.clientHeight）；
//偏移虚线的长度
var draw=长度*百分比；
//反转图形（向上滚动时）
myline.style.strokedashcoffset=长度-绘制；
//终于明白了这一点
端点=myline.getPointAtLength（绘制）；
circle.setAttribute（“cx”，endPoint.x）；
circle.setAttribute（“cy”，endPoint.y）；
}

正文{
高度：2000px；
背景#f1f1；
}
#圈{
填充物：红色；
}
#mySVG{
位置：绝对位置；
最高：15%；
宽度：100%；
高度：1000px；
}
.st1{
填充：无；
行程偏移量：3px；
笔画：灰色；
笔画宽度：4；
行程限制：10；
行程：20；
}
.st0{
填充：无；
行程偏移量：3px；
笔画：红色；
笔画宽度：5；
行程限制：10；
行程：20；
}

很抱歉，您的浏览器不支持内嵌SVG。
很抱歉，您的浏览器不支持内嵌SVG。

我会选择不同的方法。我知道您希望找到路径上最靠近屏幕中间的点。让我们这样做：

找到屏幕中间的坐标并将其转换为路径的坐标系。SVGAPI有两个函数：和

找到路径上距离这些坐标最近的点（及其沿路径的距离）。要做到这一点，需要一些数学知识和搜索算法。迈克·博斯托克（Mike Bostock）有这样一个算法，在这里使用。请注意，他的函数可能会有一些调整（参数

precision

）

使用这些数据绘制圆和虚线偏移

通过引入一个（第二个变体）然后设置为避免可见的跳转来改进这一点可能是一个好主意

圆定位的过渡仅适用于特性。（我的解决方案在过渡时不必沿路径移动圆。这是可能的，但远远超出了这个答案的范围。）

var mySVG=document.getElementById（“mySVG”）；
//获取元素的id和元素的长度
var myline=document.getElementById（“myline”）；
var pathLength=myline.getTotalLength（）；
圆圈=document.getElementById（“圆圈”）；
//图形的起始位置
myline.style.strokeDasharray=路径长度；
//通过偏移虚线隐藏三角形。在滚动绘制之前，删除此线以显示三角形
myline.style.strokedashcoffset=路径长度；
//限制滚动事件侦听器
功能节流阀（毫秒，回调）{
变量计时器，lastCall=0；
返回函数（）{
var now=new Date（）.getTime（），
diff=now-lastCall；
如果（差异>=ms）{
lastCall=现在；
回调（）；
}
};
}
addEventListener（“滚动”，节流阀（100，myFunction））；
//一次初始执行
myFunction（）；
函数myFunction（）{
var center=mySVG.createSVGPoint（）；
//浏览器视口的中间
中心.x=window.innerWidth/2；
center.y=window.innerHeight/2；
//转换为路径坐标系
var matrix=myline.getScreenCTM（）.inverse（）；
中心=中心。矩阵变换（矩阵）；
//查找路径上最近的长度
var draw=最接近的长度（中心）；
//反转图形（向上滚动时）
myline.style.strokedashcoffset=-draw-pathLength；
//终于明白了这一点
端点=myline.getPointAtLength（绘制）；
circle.style.transform=“translate（“+endPoint.x+”px，“+endPoint.y+”px）”；
}
函数getNearestLength（点）{
var精度=8，
最好的，
最佳长度，
最佳距离=无穷大；
//粗近似线性扫描
对于（变量扫描，扫描长度=0，扫描距离；扫描长度0.5）{
var之前，
之后
在长度之前，
后程，
在距离之前，
后距；
如果（（beforeLength=bestLength-precision）>=0&&（beforeDistance=distance2（before=myline.getPointAtLength（beforeLength））小于bestDistance）{
最佳=之前，最佳长度=之前长度，最佳距离=之前距离；
}如果（（afterLength=bestLength+precision）我尝试了几种方法来移动点


盒子里
不滑到尽头
只需对原始文件进行最小的更改

我做了以下更改（下面的工作示例）：


用于百分比I put 2000的分隔器（等于2000px，包含主体高度）
我将滚动量从顶部乘以18（合适的值是一个折衷值，无论顶部或底部的行为如何）
最后我检查了百分比值是否大于1（它开始从另一端吃掉“蠕虫”）

就是这样！也许不是最花哨的，但很管用

这里的问题是svg行自上而下不是线性的，因此无法选择与元素直接相关的值，或者至少我没有找到一些值。因此，我最终选择了简单的解决方案并使用参数


//获取元素的id和元素的长度
var myline=document.getElementById（“myline”）；
var length=myline.getTotalLength（）；
圆圈=document.getElementById（“圆圈”