javascript - 如何在 SVG 上绘制与给定图像数据形状完全相同的折线对象

Question

Doughnut picture

例如，给定上面的图像，我想做的是在 SVG 上绘制形状完全相同的多段线对象(我正在创建一个“绘图”或者我应该说基于 SVG 的“画笔”工具，这就是我使用的原因折线，以便用户可以用他的鼠标绘画，甚至可以用他或她的鼠标使用橡皮擦)。以下是我将如何实现这一目标。

1. 在 Canvas 上下文中绘制给定图像。
2. 获取颜色为#000000 的像素的所有坐标。
3. 使用该坐标列表在 SVG 上创建折线。

通过这个过程，我得到了这个结果 doughnut drawin with svg polyline (现在这只是一个示例结果，它的形状很难看，因为我不得不用手手动绘制它。但我的目的是获得与输入图像相同的形状)

但我不确定这是否是唯一的方法，甚至不确定我是否应该坚持使用 SVG。还有其他好的方法可以实现这一目标吗？或者使用 Canvas 而不是 SVG 会更容易吗？

Answer 1

这个形状可以用圆来画。
使用由圆圈组成的面具制作的 Papercut

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="405" height="401" viewBox="0 0 405 401" >  
<defs>
<mask id="msk1" >
	<rect width="100%" height="100%" fill="white" />
<g fill="black">
	<circle cx="202" cy="200" r="40"   />
	<circle cx="260" cy="298" r="40"   />
	<circle cx="215" cy="303" r="20"   />
</g>
</mask>
</defs>	
<circle cx="202" cy="200" r="98"  fill="black" mask="url(#msk1)" />