如何用颜色填充SVG路径到特定距离？

问题描述

我创建了一个 SVG，如下图所示。

SVG Path

在这里，我只需要为特定点的路径赋予颜色。代表用户在旅程中的进度。

1. 我搜索了任何可以实现此功能的 SVG 属性，例如 stroke-dashoffset 和 stroke-dasharray。但是，它们不起作用。
2. 我尝试过描边动画，但没有奏效。

接下来，我想通过在现有路径上绘制另一条到达所需点的路径并赋予 stroke 来实现这一点。这将解决我的问题。

但是，我面临的问题是，如果所需的点位于图像中所示路径的弯曲部分，我无法绘制与先前路径完全重叠的新路径。

我已经用这个绘制了之前的曲线

d="M 0 130L 820 130M 820 130C 1140 130 1140 466 820 466"

为了绘制新路径，我最多只能绘制 M 0 130L 820 130M 820 130C x1 y1 x2 y2 1049 350

我无法准确地绘制曲线，因为我不知道如何获得控制点 x1、y1、x2 和 y2。我正在考虑使用椭圆方程、切线和其他数学内容，但我不知道在这种情况下它的可行性如何。

是否有任何直接的方法可以使第一条路径到达所需点？

如果没有，我如何获得控制点？

解决方法

您可以使用 stroke-dasharray：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<defs>
<style>
path{
  stroke-width: 10;
}
</style>
</defs>
<path d="M 10 10 l 100 0 c 10 10 10 10 0 50 l -100 0" stroke="black" fill="transparent" />
<path d="M 10 10 l 100 0 c 10 10 10 10 0 50 l -100 0" stroke="red" fill="transparent" pathLength="1" stroke-dasharray="0.6 0.4"/>
</svg>

您可以操纵 stroke-dasharray="0.6 0.4"。只要值的总和等于pathLength，就可以表示路径中的相对长度。