javascript - 文本对象到路径 : how to remove a single path from a double path produced when you use print method in Raphael js using cambam fonts?

Question

当我在 Raphael js 上使用 print 方法将文本转换为路径时，它会生成每个字符的双路径(轮廓)。我在网上搜索并注意到有一些字体，例如:camBam这些字体看起来是真正的字体，但实际上它们是在欺骗字体创建者，让他们将它们视为字符的轮廓，同时将两条相同的行放在一起。我想知道是否有任何方法可以以编程方式(使用 js)将这些行(路径)彼此分开并删除其中之一？

以下是 svg 文件的 svg 代码，其中包含彼此重叠的路径，并且对于字母 s 来说是相同的(例如):

更新:抱歉，我在这里更新了正确的 svg 代码:

<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0, 0, 600,600"><desc>Created with Snap</desc><defs></defs><path d="M79.5111111111111,59.87405972222222C79.89444444444443,66.13517083333333,70.94999999999999,63.32405972222222,65.45555555555555,63.96294861111111C70.94999999999999,63.451837499999996,79.89444444444443,66.00739305555555,79.5111111111111,59.87405972222222C79,52.84628194444444,66.09444444444443,56.67961527777778,65.58333333333333,49.77961527777778C65.19999999999999,44.15739305555556,73.24999999999999,46.457393055555556,78.48888888888888,45.94628194444444C73.24999999999999,46.329615277777776,65.19999999999999,44.15739305555556,65.58333333333333,49.77961527777778C66.09444444444443,56.67961527777778,79,52.84628194444444,79.5111111111111,59.87405972222222C79.5111111111111,59.87405972222222,79.5111111111111,59.87405972222222,79.5111111111111,59.87405972222222" fill="#ff0000" stroke="#0000ff"></path><rect x="0" y="30" width="330" height="51" fill="none" stroke="#000000"></rect></svg>

更新2: 和here是由两种字体生成的路径

如果您在 inkscape 或 illustrator 中手动操作它，您可以看到字母 s 有 2 行相互重叠，组成了该字母:

如何使用js删除两行(路径)之一？如果我有一个完整的文本已转换为类似于 s 字符的路径，我如何将该删除函数应用于所有文本以使其成为单路径文本？

更新3:

我有以下代码尝试将 s 路径分成两半:

var sTotalpx = textpaths.getTotalLength();
var sSinglepath = Snap.path.getSubpath(textpaths, (sTotalpx/2), sTotalpx);
console.log(sSinglepath.toString());

路径结果显示一半的 s 和双线(路径)，而不是整个 s 和单线(路径)。请问有什么解决办法吗？!

更新4:

我在某处读到，当您使用 svg 编辑器时:“当使用重叠路径时，使用‘组合’或‘联合’选项将形状融合在一起并删除重叠。”

如何使用 js 以编程方式实现这一点？

Answer 1

这个定义似乎有问题(我添加了换行符以便看得更清楚):

M
79.5111111111111,59.87405972222222
C79.89444444444443,66.13517083333333,70.94999999999999,63.32405972222222,65.45555555555555,63.96294861111111
C70.94999999999999,63.451837499999996,79.89444444444443,66.00739305555555,79.5111111111111,59.87405972222222
C79,52.84628194444444,66.09444444444443,56.67961527777778,65.58333333333333,49.77961527777778
C65.19999999999999,44.15739305555556,73.24999999999999,46.457393055555556,78.48888888888888,45.94628194444444
C73.24999999999999,46.329615277777776,65.19999999999999,44.15739305555556,65.58333333333333,49.77961527777778
C66.09444444444443,56.67961527777778,79,52.84628194444444,79.5111111111111,59.87405972222222
C79.5111111111111,59.87405972222222,
79.5111111111111,59.87405972222222,
79.5111111111111,59.87405972222222

最后一个以 C 开头的定义是错误的。这可能就是您的问题的根源。你可以尝试没有最后一部分......？

这是W3C documentation for SVG paths通读它很有用;-)

请告诉我这是否适合您