Javascript 缩放SVG路径的填充部分

假设我们有以下SVG路径：

<path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />

我想知道是否有一种方法可以按照给定的比例只填充这个形状的一部分区域。我确实需要精确地将像素的数量与比率相等

例如，比率=0,6，然后只填充形状的60%像素（从底部开始）

编辑：

我试图在评论中实现@RobertLongson的暗示。好了：

当“Danny'365CSI'Engelman”在正确的轨道上时，如果他解决了凹面区域，我会扭转这一点（因为我总是在可能的情况下搜索现有的解决方案）

所以（解释算法，有人可以实现它）为什么不使用turf.js库呢？它实现了可以使用的面积计算。这可能有点棘手，reqPct代表要求填充的面积百分比：

get points of SVG path to an arrPoint
svgPolygon <- turf.polygon(arrPoint)
fullArea <- turf.area(svgPolygon)
tolerance <- 0.5
btmPct <- 0
topPct <- 100
divPct <- 0
curAreaPct <- 0
while (abs(reqPct-curAreaPct) > tolerance) do
  divPct <- (topPct-btmPct)/2
  rect <- turf.polygon with full width and divPct height of polygon
  intersectPolygon <- turf.intersect(svgPolygon, rect);
  interArea <- turf.area(intersectPolygon);
  curAreaPct <- 100 * interArea/fullArea;
  if (curAreaPct > reqPct)
    topPct <- divPct
  else
    btmPct <- divPct
end while
fill the SVG with gradient color from bottom to divPct

获取SVG路径到ARR点的点
svgPolygon@RobertLongson-thanx。我是否需要像我在上面发布的示例中那样使用偏移量（即，
stop offset=“60%”
）？仍然不确定这是否选择了60%的区域（即填充像素数），或者它只是在Y坐标的60%处停止。另请参阅：不确定我是否错了，但线性渐变似乎不起作用（请参阅文章中的片段）只是想澄清一下：没有一篇报道重复的帖子回答了这个问题question@Danny“365CSI”Engelman我已经为你重新打开了它。