Javascript 如何在SVG上绘制形状和给定图像数据完全相同的多段线对象

例如，给定上面这样的图像，我想做的是在SVG上绘制形状完全相同的多段线对象（我正在创建一个“绘图”或应该说是基于SVG的“画笔”工具，这就是为什么我使用多段线，以便用户可以用鼠标绘制，甚至可以用鼠标使用橡皮擦）。下面是我如何做到这一点的

在画布上下文中绘制给定的图像

获取彩色像素的所有坐标#000000

使用该坐标列表在SVG上创建一条多段线

通过这个过程，我得到了一个结果（现在这只是一个例子，它的形状很难看，因为我必须用手手动绘制。但我的目的是用输入图像得到相同的形状）

---

但我不确定这是否是唯一的方法，甚至不确定我是否应该坚持使用SVG。有没有其他好的方法来实现这一点？或者使用画布代替SVG会更容易吗？

这个形状可以用圆圈绘制。
使用由圆圈组成的遮罩制作的切口

---

这是假设您已经有了SVG路径

为了绘制多边形，需要使用

M

命令分割路径。在下一个示例中，我手动执行，但您可以动态执行。这很重要，因为否则将在多边形中进行分割

您还需要设置精度，即多边形各点之间的距离

请阅读我代码中的注释

let path=document.querySelectorAll（“组路径”）；
设精度=5//多边形的另一个点有多远
设点=[]；//点阵
//对于路径数组中的每个路径
路径。forEach（p=>{
//获取总长度
设totalLength=p.getTotalLength（）；
//以精度为基础获取多边形的点数
设numPoints=~~（总长度/精度）；
//计算段长度
设分段长度=总长度/个基点；
对于（设i=0；i此问题的主要目的是生成与给定图像数据“完全”相同的SVG对象，但不是如何绘制甜甜圈。这意味着，黑色像素的坐标应该保留。如果我的问题误导了您，我深表歉意。在这种情况下，甜甜圈的形状本身并不重要。任何给定的形状ke car或flower或etc对象可能是输入数据。@ChanwooPark然后您可能需要寻找可以使用命令行将光栅图像转换为svg的程序