简体   繁体   English

如何提取 svg 图像的笛卡尔坐标 (x,y)?

[英]How to extract the cartesian coordinates (x,y) of an svg image?

I have an svg image that contains a continuous path, and I want to extract its cartesian coordinates (x,y) preferably to a csv file.我有一个包含连续路径的 svg 图像,我想将其笛卡尔坐标 (x,y) 提取到 csv 文件中。

I'm doing this to recreate 3B1B's animation of any arbitrary path using epicycles.我这样做是为了使用本轮重新创建任意路径的 3B1B 的 animation。 Link here https://youtu.be/-qgreAUpPwM链接在这里https://youtu.be/-qgreAUpPwM

Is there any library or tools I can use to do this?我可以使用任何库或工具来执行此操作吗?

For example I'm parsing ballons.svg file below.例如,我正在解析下面的ballons.svg文件。


Variant 1 .变体 1 Using Python (see also Variant 2 using JavaScript).使用 Python(另请参见使用 JavaScript 的变体 2)。

First I'm using xml.dom module to find path entries inside file.首先,我使用xml.dom模块在文件中查找path条目。 Then path entries are parsed by svg.path library (needs to be installed by pip install svg.path ).然后path条目由svg.path库解析(需要通过pip install svg.path )。

There are many different types of objects can be inside path entry, eg Line, Arc, CubicBezier, QuadraticBezier, Close, etc. path入口内可以有许多不同类型的对象,例如 Line、Arc、CubicBezier、QuadraticBezier、Close 等。

For each path first I print all objects as they are inside Objects: section.对于每条路径,我首先打印所有对象,因为它们在Objects:部分中。 Then if you need coordinates of those objects then there are start / end attributes available in this objects.然后,如果您需要这些对象的坐标,那么这些对象中有可用的start / end属性。 They point to start/end point of corresponding objects.它们指向相应对象的起点/终点。

Start point (X, Y) of object inside path is (obj.start.real, obj.start.imag) . object 内部路径的起点 (X, Y) 是(obj.start.real, obj.start.imag) End point (X, Y) of object is (obj.end.real, obj.end.imag) . object 的终点 (X, Y) 是(obj.end.real, obj.end.imag) But these are only ending points, intermediate points of curve are not contained inside SVG file and need to be calculated mathematically.但这些只是终点,曲线的中间点不包含在 SVG 文件中,需要数学计算。

Try it online!在线尝试!

from xml.dom import minidom
from svg.path import parse_path

doc = minidom.parse('ballons.svg')
for ipath, path in enumerate(doc.getElementsByTagName('path')):
    print('Path', ipath)
    d = path.getAttribute('d')
    parsed = parse_path(d)
    print('Objects:\n', parsed, '\n' + '-' * 20)
    for obj in parsed:
        print(type(obj).__name__, ', start/end coords:', ((round(obj.start.real, 3), round(obj.start.imag, 3)), (round(obj.end.real, 3), round(obj.end.imag, 3))))
    print('-' * 20)
doc.unlink()

Output: Output:

Path 0
Objects:
 Path(Move(to=(144.042+167.583j)), CubicBezier(start=(144.042+167.583j), control1=(143.489+157.013j), control2=(148.337+146.4j), end=(157.00900000000001+139.192j)), Arc(start=(157.00900000000001+139.192j), radius=(35.8+35.8j), rotation=0.0, arc=False, sweep=True, end=(177.39800000000002+130.84300000000002j)), Arc(start=(177.39800000000002+130.84300000000002j), radius=(7.929+7.929j), rotation=0.0, arc=False, sweep=False, end=(178.22400000000002+130.74300000000002j)), CubicBezier(start=(178.22400000000002+130.74300000000002j), control1=(190.431+128.57700000000003j), control2=(206.53600000000003+128.52800000000002j), end=(224.794+130.60100000000003j)), Arc(start=(224.794+130.60100000000003j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(231.431+117.07400000000003j)), CubicBezier(start=(231.431+117.07400000000003j), control1=(221.173+106.52800000000002j), control2=(213.358+96.59500000000003j), end=(208.203+87.55000000000003j)), Arc(start=(208.203+87.55000000000003j), radius=(7.962+7.962j), rotation=0.0, arc=False, sweep=False, end=(207.756+86.85000000000002j)), Arc(start=(207.756+86.85000000000002j), radius=(35.82+35.82j), rotation=0.0, arc=False, sweep=True, end=(201.143+65.83200000000002j)), CubicBezier(start=(201.143+65.83200000000002j), control1=(201.143+47.13700000000002j), control2=(214.906+31.932000000000023j), end=(231.824+31.932000000000023j)), Arc(start=(231.824+31.932000000000023j), radius=(28.568+28.568j), rotation=0.0, arc=False, sweep=True, end=(250.75400000000002+39.16400000000002j)), Arc(start=(250.75400000000002+39.16400000000002j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(261.24600000000004+39.16400000000002j)), Arc(start=(261.24600000000004+39.16400000000002j), radius=(28.568+28.568j), rotation=0.0, arc=False, sweep=True, end=(280.17600000000004+31.932000000000023j)), CubicBezier(start=(280.17600000000004+31.932000000000023j), control1=(297.09400000000005+31.932000000000023j), control2=(310.857+47.142000000000024j), end=(310.857+65.83700000000002j)), Arc(start=(310.857+65.83700000000002j), radius=(35.82+35.82j), rotation=0.0, arc=False, sweep=True, end=(304.244+86.85500000000002j)), Arc(start=(304.244+86.85500000000002j), radius=(7.962+7.962j), rotation=0.0, arc=False, sweep=False, end=(303.797+87.55500000000002j)), CubicBezier(start=(303.797+87.55500000000002j), control1=(298.64200000000005+96.60000000000002j), control2=(290.827+106.53300000000002j), end=(280.569+117.07900000000002j)), Arc(start=(280.569+117.07900000000002j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(287.206+130.60600000000002j)), CubicBezier(start=(287.206+130.60600000000002j), control1=(305.464+128.53300000000002j), control2=(321.567+128.58300000000003j), end=(333.776+130.74800000000002j)), Arc(start=(333.776+130.74800000000002j), radius=(7.929+7.929j), rotation=0.0, arc=False, sweep=False, end=(334.60200000000003+130.848j)), Arc(start=(334.60200000000003+130.848j), radius=(35.8+35.8j), rotation=0.0, arc=False, sweep=True, end=(354.99+139.19600000000003j)), CubicBezier(start=(354.99+139.19600000000003j), control1=(355.923+139.97100000000003j), control2=(356.821+140.79600000000002j), end=(357.663+141.64100000000002j)), Line(start=(357.663+141.64100000000002j), end=(369.017+130.36800000000002j)), CubicBezier(start=(369.017+130.36800000000002j), control1=(367.817+129.16200000000003j), control2=(366.542+127.99300000000002j), end=(365.217+126.89300000000003j)), Arc(start=(365.217+126.89300000000003j), radius=(51.746+51.746j), rotation=0.0, arc=False, sweep=False, end=(336.168+114.92100000000003j)), Arc(start=(336.168+114.92100000000003j), radius=(151.429+151.429j), rotation=0.0, arc=False, sweep=False, end=(305.437+113.18500000000003j)), Arc(start=(305.437+113.18500000000003j), radius=(136.436+136.436j), rotation=0.0, arc=False, sweep=False, end=(317.5+95.82200000000003j)), Arc(start=(317.5+95.82200000000003j), radius=(51.744+51.744j), rotation=0.0, arc=False, sweep=False, end=(326.861+65.83000000000003j)), CubicBezier(start=(326.861+65.83000000000003j), control1=(326.861+38.312000000000026j), control2=(305.92+15.930000000000028j), end=(280.18+15.930000000000028j)), Arc(start=(280.18+15.930000000000028j), radius=(44.6+44.6j), rotation=0.0, arc=False, sweep=False, end=(256+23.13400000000003j)), Arc(start=(256+23.13400000000003j), radius=(44.6+44.6j), rotation=0.0, arc=False, sweep=False, end=(231.824+15.92500000000003j)), CubicBezier(start=(231.824+15.92500000000003j), control1=(206.084+15.92500000000003j), control2=(185.14300000000003+38.312000000000026j), end=(185.14300000000003+65.83000000000003j)), Arc(start=(185.14300000000003+65.83000000000003j), radius=(51.738+51.738j), rotation=0.0, arc=False, sweep=False, end=(194.50500000000002+95.82200000000003j)), Arc(start=(194.50500000000002+95.82200000000003j), radius=(136.32+136.32j), rotation=0.0, arc=False, sweep=False, end=(206.56000000000003+113.18000000000004j)), Arc(start=(206.56000000000003+113.18000000000004j), radius=(151.568+151.568j), rotation=0.0, arc=False, sweep=False, end=(175.83000000000004+114.91600000000004j)), Arc(start=(175.83000000000004+114.91600000000004j), radius=(51.746+51.746j), rotation=0.0, arc=False, sweep=False, end=(146.78000000000003+126.88800000000003j)), CubicBezier(start=(146.78000000000003+126.88800000000003j), control1=(134.24600000000004+137.30700000000004j), control2=(127.24900000000002+152.83200000000002j), end=(128.06300000000005+168.41700000000003j)), Close(start=(128.06300000000005+168.41700000000003j), end=(144.042+167.583j))) 
--------------------
Move , start/end coords: ((144.042, 167.583), (144.042, 167.583))
CubicBezier , start/end coords: ((144.042, 167.583), (157.009, 139.192))
Arc , start/end coords: ((157.009, 139.192), (177.398, 130.843))
Arc , start/end coords: ((177.398, 130.843), (178.224, 130.743))
CubicBezier , start/end coords: ((178.224, 130.743), (224.794, 130.601))
Arc , start/end coords: ((224.794, 130.601), (231.431, 117.074))
CubicBezier , start/end coords: ((231.431, 117.074), (208.203, 87.55))
Arc , start/end coords: ((208.203, 87.55), (207.756, 86.85))
Arc , start/end coords: ((207.756, 86.85), (201.143, 65.832))
CubicBezier , start/end coords: ((201.143, 65.832), (231.824, 31.932))
Arc , start/end coords: ((231.824, 31.932), (250.754, 39.164))
Arc , start/end coords: ((250.754, 39.164), (261.246, 39.164))
Arc , start/end coords: ((261.246, 39.164), (280.176, 31.932))
CubicBezier , start/end coords: ((280.176, 31.932), (310.857, 65.837))
Arc , start/end coords: ((310.857, 65.837), (304.244, 86.855))
Arc , start/end coords: ((304.244, 86.855), (303.797, 87.555))
CubicBezier , start/end coords: ((303.797, 87.555), (280.569, 117.079))
Arc , start/end coords: ((280.569, 117.079), (287.206, 130.606))
CubicBezier , start/end coords: ((287.206, 130.606), (333.776, 130.748))
Arc , start/end coords: ((333.776, 130.748), (334.602, 130.848))
Arc , start/end coords: ((334.602, 130.848), (354.99, 139.196))
CubicBezier , start/end coords: ((354.99, 139.196), (357.663, 141.641))
Line , start/end coords: ((357.663, 141.641), (369.017, 130.368))
CubicBezier , start/end coords: ((369.017, 130.368), (365.217, 126.893))
Arc , start/end coords: ((365.217, 126.893), (336.168, 114.921))
Arc , start/end coords: ((336.168, 114.921), (305.437, 113.185))
Arc , start/end coords: ((305.437, 113.185), (317.5, 95.822))
Arc , start/end coords: ((317.5, 95.822), (326.861, 65.83))
CubicBezier , start/end coords: ((326.861, 65.83), (280.18, 15.93))
Arc , start/end coords: ((280.18, 15.93), (256.0, 23.134))
Arc , start/end coords: ((256.0, 23.134), (231.824, 15.925))
CubicBezier , start/end coords: ((231.824, 15.925), (185.143, 65.83))
Arc , start/end coords: ((185.143, 65.83), (194.505, 95.822))
Arc , start/end coords: ((194.505, 95.822), (206.56, 113.18))
Arc , start/end coords: ((206.56, 113.18), (175.83, 114.916))
Arc , start/end coords: ((175.83, 114.916), (146.78, 126.888))
CubicBezier , start/end coords: ((146.78, 126.888), (128.063, 168.417))
Close , start/end coords: ((128.063, 168.417), (144.042, 167.583))
--------------------
Path 1
Objects:
 Path(Move(to=(272.924+205.044j)), Arc(start=(272.924+205.044j), radius=(7.852+7.852j), rotation=0.0, arc=False, sweep=False, end=(272.67199999999997+204.251j)), CubicBezier(start=(272.67199999999997+204.251j), control1=(271.53+201.213j), control2=(270.472+197.863j), end=(269.525+194.293j)), Arc(start=(269.525+194.293j), radius=(13.993+13.993j), rotation=0.0, arc=False, sweep=False, end=(242.47499999999997+194.293j)), CubicBezier(start=(242.47499999999997+194.293j), control1=(241.52799999999996+197.862j), control2=(240.47499999999997+201.21200000000002j), end=(239.32799999999997+204.25j)), Arc(start=(239.32799999999997+204.25j), radius=(7.852+7.852j), rotation=0.0, arc=False, sweep=False, end=(239.07599999999996+205.043j)), Arc(start=(239.07599999999996+205.043j), radius=(36.468+36.468j), rotation=0.0, arc=False, sweep=True, end=(200.85499999999996+231.812j)), Line(start=(200.85499999999996+231.812j), end=(199.14499999999995+247.721j)), Arc(start=(199.14499999999995+247.721j), radius=(48.387+48.387j), rotation=0.0, arc=False, sweep=False, end=(204.30699999999996+247.997j)), Arc(start=(204.30699999999996+247.997j), radius=(52.047+52.047j), rotation=0.0, arc=False, sweep=False, end=(237.36699999999996+235.86800000000002j)), Arc(start=(237.36699999999996+235.86800000000002j), radius=(53.056+53.056j), rotation=0.0, arc=False, sweep=False, end=(247.99999999999997+223.94600000000003j)), Line(start=(247.99999999999997+223.94600000000003j), end=(247.99999999999997+296j)), Line(start=(247.99999999999997+296j), end=(264+296j)), Line(start=(264+296j), end=(264+223.946j)), Arc(start=(264+223.946j), radius=(53.741+53.741j), rotation=0.0, arc=False, sweep=False, end=(284.343+242.3j)), Line(start=(284.343+242.3j), end=(291.65700000000004+228.07100000000003j)), Arc(start=(291.65700000000004+228.07100000000003j), radius=(37.536+37.536j), rotation=0.0, arc=False, sweep=True, end=(284.857+223.57100000000003j)), Arc(start=(284.857+223.57100000000003j), radius=(35.815+35.815j), rotation=0.0, arc=False, sweep=True, end=(272.92400000000004+205.04400000000004j)), Close(start=(272.92400000000004+205.04400000000004j), end=(272.924+205.044j))) 
--------------------
Move , start/end coords: ((272.924, 205.044), (272.924, 205.044))
Arc , start/end coords: ((272.924, 205.044), (272.672, 204.251))
CubicBezier , start/end coords: ((272.672, 204.251), (269.525, 194.293))
Arc , start/end coords: ((269.525, 194.293), (242.475, 194.293))
CubicBezier , start/end coords: ((242.475, 194.293), (239.328, 204.25))
Arc , start/end coords: ((239.328, 204.25), (239.076, 205.043))
Arc , start/end coords: ((239.076, 205.043), (200.855, 231.812))
Line , start/end coords: ((200.855, 231.812), (199.145, 247.721))
Arc , start/end coords: ((199.145, 247.721), (204.307, 247.997))
Arc , start/end coords: ((204.307, 247.997), (237.367, 235.868))
Arc , start/end coords: ((237.367, 235.868), (248.0, 223.946))
Line , start/end coords: ((248.0, 223.946), (248.0, 296.0))
Line , start/end coords: ((248.0, 296.0), (264.0, 296.0))
Line , start/end coords: ((264.0, 296.0), (264.0, 223.946))
Arc , start/end coords: ((264.0, 223.946), (284.343, 242.3))
Line , start/end coords: ((284.343, 242.3), (291.657, 228.071))
Arc , start/end coords: ((291.657, 228.071), (284.857, 223.571))
Arc , start/end coords: ((284.857, 223.571), (272.924, 205.044))
Close , start/end coords: ((272.924, 205.044), (272.924, 205.044))
--------------------
Path 2
Objects:
 Path(Move(to=(248+312j)), Line(start=(248+312j), end=(264+312j)), Line(start=(264+312j), end=(264+496j)), Line(start=(264+496j), end=(248+496j)), Close(start=(248+496j), end=(248+312j))) 
--------------------
Move , start/end coords: ((248.0, 312.0), (248.0, 312.0))
Line , start/end coords: ((248.0, 312.0), (264.0, 312.0))
Line , start/end coords: ((264.0, 312.0), (264.0, 496.0))
Line , start/end coords: ((264.0, 496.0), (248.0, 496.0))
Close , start/end coords: ((248.0, 496.0), (248.0, 312.0))
--------------------
Path 3
Objects:
 Path(Move(to=(272+56j)), Line(start=(272+56j), end=(288+56j)), Line(start=(288+56j), end=(288+72j)), Line(start=(288+72j), end=(272+72j)), Close(start=(272+72j), end=(272+56j))) 
--------------------
Move , start/end coords: ((272.0, 56.0), (272.0, 56.0))
Line , start/end coords: ((272.0, 56.0), (288.0, 56.0))
Line , start/end coords: ((288.0, 56.0), (288.0, 72.0))
Line , start/end coords: ((288.0, 72.0), (272.0, 72.0))
Close , start/end coords: ((272.0, 72.0), (272.0, 56.0))
--------------------
Path 4
Objects:
 Path(Move(to=(496+288j)), Line(start=(496+288j), end=(496+284j)), Arc(start=(496+284j), radius=(28.032+28.032j), rotation=0.0, arc=False, sweep=False, end=(468+256j)), Line(start=(468+256j), end=(450.4+256j)), Arc(start=(450.4+256j), radius=(182.459+182.459j), rotation=0.0, arc=False, sweep=False, end=(436.52099999999996+217.525j)), Arc(start=(436.52099999999996+217.525j), radius=(28.012+28.012j), rotation=0.0, arc=False, sweep=False, end=(412.68399999999997+176.008j)), Arc(start=(412.68399999999997+176.008j), radius=(40.037+40.037j), rotation=0.0, arc=False, sweep=False, end=(339.308+176.008j)), Arc(start=(339.308+176.008j), radius=(28.012+28.012j), rotation=0.0, arc=False, sweep=False, end=(315.471+217.525j)), CubicBezier(start=(315.471+217.525j), control1=(302.719+243.207j), control2=(296+272.96500000000003j), end=(296+304j)), CubicBezier(start=(296+304j), control1=(296+337.20799999999997j), control2=(303.692+368.956j), end=(318.244+395.812j)), Arc(start=(318.244+395.812j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(325.278+400j)), Line(start=(325.278+400j), end=(368+400j)), Line(start=(368+400j), end=(368+496j)), Line(start=(368+496j), end=(384+496j)), Line(start=(384+496j), end=(384+400j)), Line(start=(384+400j), end=(426.722+400j)), Arc(start=(426.722+400j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(433.756+395.812j)), Arc(start=(433.756+395.812j), radius=(180.656+180.656j), rotation=0.0, arc=False, sweep=False, end=(450.4+352j)), Line(start=(450.4+352j), end=(458+352j)), Arc(start=(458+352j), radius=(38.043+38.043j), rotation=0.0, arc=False, sweep=False, end=(496+314j)), Line(start=(496+314j), end=(496+304j)), Line(start=(496+304j), end=(480+304j)), Line(start=(480+304j), end=(480+314j)), Arc(start=(480+314j), radius=(22.025+22.025j), rotation=0.0, arc=False, sweep=True, end=(458+336j)), Line(start=(458+336j), end=(453.56+336j)), Arc(start=(453.56+336j), radius=(211.056+211.056j), rotation=0.0, arc=False, sweep=False, end=(453.56+272j)), Line(start=(453.56+272j), end=(468+272j)), Arc(start=(468+272j), radius=(12.013+12.013j), rotation=0.0, arc=False, sweep=True, end=(480+284j)), Line(start=(480+284j), end=(480+288j)), Close(start=(480+288j), end=(496+288j)), Move(to=(433.907+352j)), Line(start=(433.907+352j), end=(318.09299999999996+352j)), Arc(start=(318.09299999999996+352j), radius=(192.116+192.116j), rotation=0.0, arc=False, sweep=True, end=(318.09299999999996+256j)), Line(start=(318.09299999999996+256j), end=(391.99999999999994+256j)), Line(start=(391.99999999999994+256j), end=(391.99999999999994+240j)), Line(start=(391.99999999999994+240j), end=(323.17699999999996+240j)), Arc(start=(323.17699999999996+240j), radius=(159.556+159.556j), rotation=0.0, arc=False, sweep=True, end=(330.128+224j)), Line(start=(330.128+224j), end=(421.87199999999996+224j)), Arc(start=(421.87199999999996+224j), radius=(159.556+159.556j), rotation=0.0, arc=False, sweep=True, end=(428.823+240j)), Line(start=(428.823+240j), end=(408+240j)), Line(start=(408+240j), end=(408+256j)), Line(start=(408+256j), end=(433.907+256j)), Arc(start=(433.907+256j), radius=(192.116+192.116j), rotation=0.0, arc=False, sweep=True, end=(433.907+352j)), Close(start=(433.907+352j), end=(433.907+352j)), Move(to=(340+192j)), Arc(start=(340+192j), radius=(12.077+12.077j), rotation=0.0, arc=False, sweep=True, end=(342.923+192.357j)), Arc(start=(342.923+192.357j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(352.646+186.44j)), Arc(start=(352.646+186.44j), radius=(24.009+24.009j), rotation=0.0, arc=False, sweep=True, end=(399.35400000000004+186.44j)), Arc(start=(399.35400000000004+186.44j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(409.07700000000006+192.357j)), Arc(start=(409.07700000000006+192.357j), radius=(12.016+12.016j), rotation=0.0, arc=False, sweep=True, end=(424.00000000000006+204j)), Arc(start=(424.00000000000006+204j), radius=(11.949+11.949j), rotation=0.0, arc=False, sweep=True, end=(423.32000000000005+208j)), Line(start=(423.32000000000005+208j), end=(328.68000000000006+208j)), Arc(start=(328.68000000000006+208j), radius=(12.015+12.015j), rotation=0.0, arc=False, sweep=True, end=(340.00000000000006+192j)), Close(start=(340.00000000000006+192j), end=(340+192j)), Move(to=(330.128+384j)), Arc(start=(330.128+384j), radius=(159.556+159.556j), rotation=0.0, arc=False, sweep=True, end=(323.17699999999996+368j)), Line(start=(323.17699999999996+368j), end=(428.823+368j)), Arc(start=(428.823+368j), radius=(159.556+159.556j), rotation=0.0, arc=False, sweep=True, end=(421.87199999999996+384j)), Close(start=(421.87199999999996+384j), end=(330.128+384j))) 
--------------------
Move , start/end coords: ((496.0, 288.0), (496.0, 288.0))
Line , start/end coords: ((496.0, 288.0), (496.0, 284.0))
Arc , start/end coords: ((496.0, 284.0), (468.0, 256.0))
Line , start/end coords: ((468.0, 256.0), (450.4, 256.0))
Arc , start/end coords: ((450.4, 256.0), (436.521, 217.525))
Arc , start/end coords: ((436.521, 217.525), (412.684, 176.008))
Arc , start/end coords: ((412.684, 176.008), (339.308, 176.008))
Arc , start/end coords: ((339.308, 176.008), (315.471, 217.525))
CubicBezier , start/end coords: ((315.471, 217.525), (296.0, 304.0))
CubicBezier , start/end coords: ((296.0, 304.0), (318.244, 395.812))
Arc , start/end coords: ((318.244, 395.812), (325.278, 400.0))
Line , start/end coords: ((325.278, 400.0), (368.0, 400.0))
Line , start/end coords: ((368.0, 400.0), (368.0, 496.0))
Line , start/end coords: ((368.0, 496.0), (384.0, 496.0))
Line , start/end coords: ((384.0, 496.0), (384.0, 400.0))
Line , start/end coords: ((384.0, 400.0), (426.722, 400.0))
Arc , start/end coords: ((426.722, 400.0), (433.756, 395.812))
Arc , start/end coords: ((433.756, 395.812), (450.4, 352.0))
Line , start/end coords: ((450.4, 352.0), (458.0, 352.0))
Arc , start/end coords: ((458.0, 352.0), (496.0, 314.0))
Line , start/end coords: ((496.0, 314.0), (496.0, 304.0))
Line , start/end coords: ((496.0, 304.0), (480.0, 304.0))
Line , start/end coords: ((480.0, 304.0), (480.0, 314.0))
Arc , start/end coords: ((480.0, 314.0), (458.0, 336.0))
Line , start/end coords: ((458.0, 336.0), (453.56, 336.0))
Arc , start/end coords: ((453.56, 336.0), (453.56, 272.0))
Line , start/end coords: ((453.56, 272.0), (468.0, 272.0))
Arc , start/end coords: ((468.0, 272.0), (480.0, 284.0))
Line , start/end coords: ((480.0, 284.0), (480.0, 288.0))
Close , start/end coords: ((480.0, 288.0), (496.0, 288.0))
Move , start/end coords: ((433.907, 352.0), (433.907, 352.0))
Line , start/end coords: ((433.907, 352.0), (318.093, 352.0))
Arc , start/end coords: ((318.093, 352.0), (318.093, 256.0))
Line , start/end coords: ((318.093, 256.0), (392.0, 256.0))
Line , start/end coords: ((392.0, 256.0), (392.0, 240.0))
Line , start/end coords: ((392.0, 240.0), (323.177, 240.0))
Arc , start/end coords: ((323.177, 240.0), (330.128, 224.0))
Line , start/end coords: ((330.128, 224.0), (421.872, 224.0))
Arc , start/end coords: ((421.872, 224.0), (428.823, 240.0))
Line , start/end coords: ((428.823, 240.0), (408.0, 240.0))
Line , start/end coords: ((408.0, 240.0), (408.0, 256.0))
Line , start/end coords: ((408.0, 256.0), (433.907, 256.0))
Arc , start/end coords: ((433.907, 256.0), (433.907, 352.0))
Close , start/end coords: ((433.907, 352.0), (433.907, 352.0))
Move , start/end coords: ((340.0, 192.0), (340.0, 192.0))
Arc , start/end coords: ((340.0, 192.0), (342.923, 192.357))
Arc , start/end coords: ((342.923, 192.357), (352.646, 186.44))
Arc , start/end coords: ((352.646, 186.44), (399.354, 186.44))
Arc , start/end coords: ((399.354, 186.44), (409.077, 192.357))
Arc , start/end coords: ((409.077, 192.357), (424.0, 204.0))
Arc , start/end coords: ((424.0, 204.0), (423.32, 208.0))
Line , start/end coords: ((423.32, 208.0), (328.68, 208.0))
Arc , start/end coords: ((328.68, 208.0), (340.0, 192.0))
Close , start/end coords: ((340.0, 192.0), (340.0, 192.0))
Move , start/end coords: ((330.128, 384.0), (330.128, 384.0))
Arc , start/end coords: ((330.128, 384.0), (323.177, 368.0))
Line , start/end coords: ((323.177, 368.0), (428.823, 368.0))
Arc , start/end coords: ((428.823, 368.0), (421.872, 384.0))
Close , start/end coords: ((421.872, 384.0), (330.128, 384.0))
--------------------
Path 5
Objects:
 Path(Move(to=(336+280j)), Line(start=(336+280j), end=(352+280j)), Line(start=(352+280j), end=(352+296j)), Line(start=(352+296j), end=(336+296j)), Close(start=(336+296j), end=(336+280j))) 
--------------------
Move , start/end coords: ((336.0, 280.0), (336.0, 280.0))
Line , start/end coords: ((336.0, 280.0), (352.0, 280.0))
Line , start/end coords: ((352.0, 280.0), (352.0, 296.0))
Line , start/end coords: ((352.0, 296.0), (336.0, 296.0))
Close , start/end coords: ((336.0, 296.0), (336.0, 280.0))
--------------------
Path 6
Objects:
 Path(Move(to=(392+312j)), Line(start=(392+312j), end=(408+312j)), Line(start=(408+312j), end=(408+328j)), Line(start=(408+328j), end=(392+328j)), Close(start=(392+328j), end=(392+312j))) 
--------------------
Move , start/end coords: ((392.0, 312.0), (392.0, 312.0))
Line , start/end coords: ((392.0, 312.0), (408.0, 312.0))
Line , start/end coords: ((408.0, 312.0), (408.0, 328.0))
Line , start/end coords: ((408.0, 328.0), (392.0, 328.0))
Close , start/end coords: ((392.0, 328.0), (392.0, 312.0))
--------------------

................................

Variant 2 .变体 2 Using JavaScript使用 JavaScript

There is a svg-path-interpolator library.有一个svg-path-interpolator库。

Install it npm install -g svg-path-interpolator .安装它npm install -g svg-path-interpolator

Write config.json with content eg使用内容编写config.json ,例如

{
  "joinPathData": false,
  "minDistance": 0.5,
  "roundToNearest": 0.25,
  "sampleFrequency": 0.001,
  "pretty": false,
  "prettyIndent": 0
}

Run it svgpi config.json ballons.svg ballons.json , output ballons.json will contain rendered (X, Y) points of all paths/lines/curves. Run it svgpi config.json ballons.svg ballons.json , output ballons.json will contain rendered (X, Y) points of all paths/lines/curves.

In your code you may use library like this:在您的代码中,您可以使用这样的库:

import SVGPathInterpolator from 'SVGPathInterpolator';
const svgString = `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
    <g>
        <path id="path3789" d="M287.168,442.411
        c-8.65,0-15.652,7.003-15.652,15.653
        c0,8.65,7.003,15.69,15.652,15.69
        s15.653-7.04,15.653-15.69
        "/>
    </g>
</svg>
`;
const config = {
    joinPathData: false,
    minDistance: 0.5,
    roundToNearest: 0.25,
    sampleFrequency: 0.001
};
const interpolator = new SVGPathInterpolator(config);
const pathData = interpolator.processSvg(svgString);

After thoroughly searching the internet, I have found this remarkable site that does what I want!在彻底搜索互联网后,我发现了这个出色的网站,可以满足我的需求!

https://spotify.github.io/coordinator https://spotify.github.io/coordinator

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM