Text object to Path: how to remove a single path from a double path produced when you use print method in Raphael js using cambam fonts?

Question

When I use the print method on Raphael js to convert text to path it produces a double path(an outline) of each character. I have searched on line and noticed that there are some fonts like: camBam fonts that seem to be true type fonts but they actually are tricking the font creators to see them as outline of a characters while they are putting 2 same lines on top of each other. I was wondering If there is any way to programmatically (using js) split those lines(paths) on top of each other and remove one of them?

Here is the svg code to an svg file that contains paths that are on top of each other and are the same for letter s (for example) :

Update : Sorry, here I've updated the right svg code:

<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>

Update2: And here is paths produced from both fonts

And if you manipulated it manually in inkscape or illustrator you can see that the letter s has 2 lines on top of each other that makes up that letter:

How can I remove one of the 2 lines(paths) using js? And if I have a whole text that has been converted to paths similar to the s character, how can I apply that removal function to all the text to make it single paths texts?

Update3:

I have the following code that tries to split the s path in half:

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

And the path result is showing half of s and doubled line(paths)instead of the whole s with single line(path). Any workaround ideas please?!

Update 4:

I read somewhere that when you use svg editors:" when using overlapping paths, use 'combine' or 'union' options to fuse the shapes together and remove overlaps."

How this is possible programmatically using js please?

Answer 1

There seems to be a problem in this definition (I added linebreaks to see better) :

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

The last definition starting with a C is just wrong. This might be where your problem is coming from. You could try without this last part...?

This is the W3C documentation for SVG paths that is useful to read it through ;-)

Let me know if that works for you

Answer 2

要对两个路径进行分组，您希望将它们放在父<g>标记下。

Answer 3

I'm aware it's an outdated question but looks like this is rather rare ... I found this thread while searching for solution with very similiar problem . I needed single line font and used CamBam font, too. I used 'text-to-svg' to get SVG paths (probably the same results as with Raphael.js).

After some tests and reading I figured out that theese fonts are 'looped' to create [looking as] fillable (closed) paths, being more compatible with strictly systems. This is done by drawing path in reverse order.

For simple, open chars this problem is not so hard - SIMPLY it's enough to find 'central symmetricity point' in the middle of svg path sequence and drop the rest. But this is not trivial problem, too.

In this case it's a last point of middle(4-th) C[urve] command (78.48888888888888,45.94628194444444). From that point you can see mirror symmetric in control point's positions ... but excluding the first point of first C command next to 'reversing point'. There can be L[ine] command in the middle, too.

To get rid of error filling svg path must have attribute fill="none".

As mentioned eariler - it's quite easy with simple chars - in many cases looping result can be different! There can be one, two or more closed loops followed with exactly (or almost?) the same loops but preserving [original drawing] sequence ('1a, 1b, 1a, 1b' or '1a, 1b, 1c, 1a, 1b, 1c'), not 1 by 1 copy ('1a, 1a, 1b, 1b') ... and probably (didn't checked this) mixed with 'symmetric looped' paths (to be divided) between them!

PS. This is theory ... I don't have ready, inplemented solution yet. I'll do it in a near future.