Question

我有一个巨大的SVG文件，其所有数据都在一个单独的元素中。它是这样的：

<path d="M724 1541c133,-400 36,-222 334,-520 76,-75 440,-37 557,-37 145,291 111,
    -32 111,445 0,344 -3,260 483,260 457,0 177,-111 409,-111 0,-62 0,-124 0,-186 
    -368,0 190,-111 -409,-111 -143,0 2,40 -148,223 ... huge SVG "/>

我正在使用函数＆＃34; getPointAtLength＆＃34;将这个巨大的SVG转换为折线，因为这个人回答了我的问题：https://stackoverflow.com/a/39405746/2934699

问题在于：这个SVG不是连续的，它有一些未连接的形状（矩形，圆形......）。但是当我使用上面链接的方法时，我的所有形状都会连接起来。有没有办法解决这个问题？

Answer 1

我可以考虑两种可能的方法来解决您的问题。

<强> 1。快速而肮脏

在循环路径时，计算距离最后一个路径点的距离。如果该距离超过某个限制，您可以认为已进入新的子路径。所以开始一条新的折线。

<强> 2。更准确但更棘手

使用mypath.pathSegList属性预处理路径。该调用返回路径中路径命令的列表。

然后遍历pathSegList并记下每个移动命令的位置。这些标记每个子路径的开头
在循环展平路径时，请调用mypath.getPathSegAtLength()函数。它返回该长度的pathseg条目的索引。
将其与您在步骤1中记录的数据进行比较，看看您是否已进入新的子路径
如果有，请开始新的折线（或多边形）

一个复杂因素是Chrome已弃用对pathSegList属性的支持，而是转而使用新的SVG2 API（mypath.getPathData()）。幸运的是，Chrome有一个polyfill可以添加对旧API的支持。或者，您可以切换到新API并使用其他polyfill，以便新API可以在旧浏览器上运行。

You can find details on the two polyfills here

getPointAtLength与SVG无法正常工作

1 个答案: