getPointAtLength與SVG無法正常工作

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

我使用的功能「getPointAtLength」，因爲這傢伙回答我的問題，這個巨大的SVG轉換成折線：https://stackoverflow.com/a/39405746/2934699

問題是這樣的：該SVG是不是一個連續一個，它有一些沒有連接的形狀（矩形，圓圈......）。但是當我使用上面鏈接的方法時，所有的形狀都被連接了。有沒有辦法解決這個問題？

Answer 1

有兩種可能的方法可以解決您的問題。

1.快速和骯髒的

當你遍歷路徑，計算從最後一個路徑點的距離。如果該距離超過某個限制，則可以認爲您已踏入新的子路徑。所以開始一個新的折線。

2.更準確，但棘手

預處理使用mypath.pathSegList屬性的路徑。該調用返回路徑中的路徑命令列表。

1. 然後遍歷pathSegList並記下每個移動命令的位置。這些通過扁平化的路徑標記每個子路徑
2. 當你循環的開始，調用mypath.getPathSegAtLength()功能。它返回該長度處pathseg條目的索引。
3. 相比之下，與您在步驟1中記錄的數據，看看你是否已經進入一個新的子路徑
4. 如果你有，啓動一個新的折線（或多邊形）

一個複雜的是，Chrome的有不推薦使用對pathSegList屬性的支持，而是將其移至此新的SVG2 API（mypath.getPathData()）。幸運的是，Chrome爲Chrome添加了對舊API的支持。或者你可以切換到新的API並使用不同的polyfill，以便新的API可以在舊版瀏覽器上運行。

You can find details on the two polyfills here