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

Question

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

SVG Path

在这里，我要求只给路径的某个点上色。它是代表用户在他的旅程中的进步。

我搜索了可以实现此功能的任何 SVG 属性，例如 stroke-dashoffset 和 stroke-dasharray。但是，它们没有用。
我试过笔画动画，但没用。

接下来，我想通过在现有路径上绘制另一条路径到所需点并为其提供 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，所以无法准确画出曲线。我正在考虑使用椭圆方程、切线和其他数学东西，但我不知道在这种情况下它的可行性如何。

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

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

Answer 1

你可以用 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，就可以表示路径中的相对长度。

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

How to fill SVG path with color upto a specific distance?

svg

curve

ellipse

stroke