文本对象到路径：如何从使用 cambam 字体在 Raphael js 中使用打印方法时产生的双路径中删除单个路径？

Question

当我在 Raphael js 上使用 print 方法将文本转换为路径时，它会生成每个字符的双路径（轮廓）。我在网上搜索并注意到有一些字体，例如：camBam 字体似乎是真正的类型字体，但实际上它们是在欺骗字体创建者将它们视为字符的轮廓，而他们将 2 条相同的行放在顶部彼此的。我想知道是否有任何方法可以以编程方式（使用 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 删除 2 行（路径）之一？如果我有一个已转换为类似于 s 字符的路径的整个文本，我如何将该删除功能应用于所有文本以使其成为单路径文本？

更新3：

我有以下代码试图将 s 路径分成两半：

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

并且路径结果显示的是 s 的一半和双行（路径），而不是整个 s 和单行（路径）。请问有什么解决办法吗？！

更新 4：

我在某处读到，当您使用 svg 编辑器时：“当使用重叠路径时，使用 'combine' 或 'union' 选项将形状融合在一起并消除重叠。”

请问这是如何以编程方式使用 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，对阅读它很有用;-)

让我知道这是否适合你

Answer 2

我知道这是一个过时的问题，但看起来这种情况相当罕见...... 我在寻找具有非常相似问题的解决方案时发现了这个帖子。 我也需要单行字体并使用 CamBam 字体。我使用“text-to-svg”来获取 SVG 路径（可能与 Raphael.js 的结果相同）。

经过一些测试和阅读后，我发现这些字体是“循环的”以创建 [看起来] 可填充（封闭）路径，与严格的系统更兼容。这是通过以相反的顺序绘制路径来完成的。

对于简单的开放字符，这个问题并不难 - 只需在 svg 路径序列的中间找到“中心对称点”并丢弃其余部分就足够了。 但这也不是小问题。

在这种情况下，它是中间 (4-th) C[urve] 命令的最后一个点 (78.48888888888888,45.94628194444444)。从那时起，您可以看到控制点位置的镜像对称... 但不包括“反转点”旁边的第一个 C 命令的第一个点。中间也可以有L[ine]命令。

要摆脱错误填充 svg 路径必须具有属性 fill="none"。

如前所述 - 使用简单的字符很容易 - 在许多情况下循环结果可能不同！ 可以有一个、两个或多个闭环，紧接着 （或几乎？）相同的循环，但保留 [原始绘图] 序列（'1a, 1b, 1a, 1b' 或 '1a, 1b, 1c, 1a, 1b, 1c'），而不是 1通过 1 个副本 ('1a, 1a, 1b, 1b') ...并且可能（没有检查过）在它们之间混合了“对称循环”路径（将被分割）！

PS。这是理论......我还没有准备好，实施的解决方案。我会在不久的将来这样做。

Answer 3

要将两条路径组合在一起，您希望将它们放在父 <g> 标记下。