Html 你有奇怪的结局吗？如何均匀地展开划杠？

我在看这个

然后我看着这个

我特别关注的是

笔划dasharray

，在这种情况下，在该代码中，不确定发生了什么，但我认为这是笔划的结束，不确定如何正确获得它

但基本上是这样

---

为什么会发生这种情况，以及如何防止这种情况发生，或者选择一种适合线条和间隙的方法？

而不是

数组：5可以使用
笔划dasharray:5.227问题就解决了。为什么?

第一：路径的总长度为313.6517333984375。您可以使用
getTotalLength（）
方法计算它

然后将长度等分，例如，将总长度除以60:313.6517333984375/60=5.22752889973958

请注意，分隔符必须是偶数。61不行，因为你开始会中风，最后会中风。你需要在开始时划一杆，在结束时划一段距离


.stroke{
笔画：红色；
行程数组：5.227；
}
/*演示样式*/
身体{
背景：#333；
}
.模块{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
svg{
填充：#333；
笔画宽度：5%；
}
而不是
笔划数组：5可以使用
笔划dasharray:5.227问题就解决了。为什么?

第一：路径的总长度为313.6517333984375。您可以使用
getTotalLength（）
方法计算它

然后将长度等分，例如，将总长度除以60:313.6517333984375/60=5.22752889973958

请注意，分隔符必须是偶数。61不行，因为你开始会中风，最后会中风。你需要在开始时划一杆，在结束时划一段距离


.stroke{
笔画：红色；
行程数组：5.227；
}
/*演示样式*/
身体{
背景：#333；
}
.模块{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
svg{
填充：#333；
笔画宽度：5%；
}

在codepen上，您甚至可以实时查看它，从@revar linked penOh中找到一个可接受的值，然后您可以使用
calc（313.6517333984375/（10*2）
来关注您想要的笔划数或
calc（313.6517333984375/20
只关注你想要多少笔划和间距，比如如何获得结果或其他东西。问题是，如果不使用id，你必须手动添加一个，然后使用该函数。不确定是否有方法使用CSS获得整个路径长度，但使用JS也可以。或者有方法计算它？我认为你不能使用CSS获取路径长度。获取路径长度的另一种方法是
2*Math.PI*r
where r=“50”（圆周长的公式），结果会有点不同，但我认为这并不重要。如果你更仔细地观察结果（例如，当使用更精细的除法时）您会发现@enxaneta提到的基于数学的弧长计算比
.getTotalLength（）的结果更好
approach。由于某些原因，后者返回的数字稍微太小。在codepen上，您甚至可以使用tweek it live从@revar linked penOh中找到一个可接受的值，然后您可以使用
calc（313.6517333984375/（10*2）
如果您想关注需要多少笔划或
calc（313.6517333984375/20
只关注你想要多少笔划和间距，比如如何获得结果或其他东西。问题是，如果不使用id，你必须手动添加一个，然后使用该函数。不确定是否有方法使用CSS获得整个路径长度，但使用JS也可以。或者有方法计算它？我认为你不能使用CSS获取路径长度。获取路径长度的另一种方法是
2*Math.PI*r
where r=“50”（圆周长的公式），结果会有点不同，但我认为这并不重要。如果你更仔细地观察结果（例如，当使用更精细的除法时）您会发现@enxaneta提到的基于数学的弧长计算比
.getTotalLength（）
方法的结果要好。出于某种原因，后者返回的数值稍微太小。