Home > front end >  SVG <path > strokes and detexify database 'strokes'. How to go from on to the other?
SVG <path > strokes and detexify database 'strokes'. How to go from on to the other?

Time:12-17

I am trying to generate handwritten math text by using mathjax to convert tex to svg and then change svg paths to "strokes" obtained from detexify database github.

How can one convert Detexify's strokes:

The „strokes“ column contains an array of strokes each of which contains an array of [x,y,t] triples. [[[x1,y1,t1], [x2,y2,t2], …], …].

to the svg format.

Example: take latex \sqrt

For an svg file:

<path id="MJX-15-TEX-SO-221A" d="M263 249Q264 249 315 130T417 -108T470 -228L725 302Q981 837 982 839Q989 850 1001 850Q1008 850 1013 844T1020 832V826L741 243Q645 43 540 -176Q479 -303 469 -324T453 -348Q449 -350 436 -350L424 -349L315 -96Q206 156 205 156L171 130Q138 104 137 104L111 130L263 249Z"></path>

Detexify provides us with :

[[[134.5,170.125,1390746601343],[134.5,170.125,1390746601362],[134.5,170.125,1390746601369],[134.5,170.125,1390746601379],[135.5,170.125,1390746601548],[136.5,170.125,1390746601575],[143.5,170.125,1390746601599],[144.5,170.125,1390746601605],[147.5,170.125,1390746601623],[149.5,171.125,1390746601636],[150.5,171.125,1390746601656],[151.5,172.125,1390746601672],[152.5,172.125,1390746601682],[153.5,172.125,1390746601694],[153.5,173.125,1390746601708],[154.5,173.125,1390746601716],[155.5,173.125,1390746601734],[155.5,174.125,1390746601749],[155.5,175.125,1390746601925],[156.5,175.125,1390746601933],[156.5,176.125,1390746601940],[156.5,178.125,1390746601955],[156.5,179.125,1390746601964],[156.5,180.125,1390746601972],[156.5,181.125,1390746601981],[156.5,182.125,1390746601990],[156.5,183.125,1390746601998],[156.5,184.125,1390746602013],[156.5,185.125,1390746602022],[156.5,186.125,1390746602029],[156.5,187.125,1390746602040],[156.5,188.125,1390746602044],[156.5,190.125,1390746602056],[156.5,191.125,1390746602061],[156.5,193.125,1390746602076],[156.5,194.125,1390746602092],[156.5,195.125,1390746602108],[156.5,196.125,1390746602116],[156.5,197.125,1390746602132],[156.5,198.125,1390746602150],[156.5,199.125,1390746602156],[156.5,200.125,1390746602172],[156.5,201.125,1390746602196],[156.5,201.125,1390746602206],[156.5,202.125,1390746602212],[156.5,203.125,1390746602222],[156.5,204.125,1390746602237],[156.5,205.125,1390746602245],[156.5,206.125,1390746602255],[156.5,207.125,1390746602260],[156.5,208.125,1390746602272],[156.5,207.125,1390746602397],[156.5,206.125,1390746602405],[157.5,205.125,1390746602412],[157.5,203.125,1390746602422],[158.5,201.125,1390746602428],[158.5,200.125,1390746602439],[158.5,198.125,1390746602444],[158.5,195.125,1390746602455],[158.5,193.125,1390746602460],[159.5,191.125,1390746602472],[159.5,190.125,1390746602476],[160.5,188.125,1390746602490],[160.5,187.125,1390746602495],[160.5,186.125,1390746602506],[160.5,184.125,1390746602509],[160.5,183.125,1390746602524],[160.5,182.125,1390746602532],[160.5,181.125,1390746602540],[160.5,180.125,1390746602556],[160.5,179.125,1390746602564],[161.5,175.125,1390746602582],[161.5,173.125,1390746602591],[162.5,171.125,1390746602599],[162.5,168.125,1390746602606],[163.5,166.125,1390746602614],[163.5,163.125,1390746602622],[164.5,160.125,1390746602629],[164.5,158.125,1390746602640],[164.5,156.125,1390746602643],[165.5,154.125,1390746602656],[165.5,152.125,1390746602659],[165.5,150.125,1390746602673],[165.5,149.125,1390746602677],[165.5,148.125,1390746602691],[165.5,146.125,1390746602694],[165.5,145.125,1390746602708],[165.5,144.125,1390746602724],[165.5,143.125,1390746602732],[165.5,142.125,1390746602780],[165.5,141.125,1390746602805],[165.5,140.125,1390746602828],[164.5,140.125,1390746602836],[164.5,139.125,1390746602861],[164.5,138.125,1390746602940],[165.5,138.125,1390746603293],[166.5,138.125,1390746603306],[168.5,138.125,1390746603313],[171.5,138.125,1390746603323],[174.5,139.125,1390746603326],[177.5,139.125,1390746603340],[180.5,139.125,1390746603344],[183.5,139.125,1390746603356],[187.5,139.125,1390746603359],[194.5,140.125,1390746603373],[197.5,140.125,1390746603382],[200.5,140.125,1390746603390],[203.5,140.125,1390746603398],[205.5,140.125,1390746603407],[207.5,140.125,1390746603416],[208.5,140.125,1390746603423],[210.5,140.125,1390746603440],[211.5,140.125,1390746603446],[212.5,140.125,1390746603461],[212.5,141.125,1390746603469],[213.5,141.125,1390746603477],[214.5,141.125,1390746603493],[215.5,141.125,1390746603517],[216.5,142.125,1390746603525],[217.5,142.125,1390746603541],[218.5,143.125,1390746603549],[219.5,143.125,1390746603557],[220.5,143.125,1390746603573],[221.5,143.125,1390746603582],[222.5,143.125,1390746603590],[223.5,143.125,1390746603598],[225.5,143.125,1390746603613],[226.5,143.125,1390746603629],[227.5,143.125,1390746603639],[228.5,143.125,1390746603645],[229.5,143.125,1390746603661],[229.5,144.125,1390746603677],[230.5,144.125,1390746603690]]]

CodePudding user response:

Plot the x,y as a polyline and ignore the t values. If you really want to use a path then stick an M in the front and similarly add all the x,y values ignoring the t values.

When you've got that working you can delay adding each vertex to the polyline/path by the time delta tn 1-tn

  • Related