SVG的getPointAtLength无法正常工作 [英] getPointAtLength with SVG not working correctly

问题描述

我有一个巨大的SVG文件，其所有数据都在一个元素中.就像这样:

I have a huge SVG file and all of its data is in one single element. It's something like this:

<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

I am converting this huge SVG to polylines using the function "getPointAtLength"as this guy answered my question: https://stackoverflow.com/a/39405746/2934699

问题是这样的:此SVG不是连续的，它具有一些未连接的形状(矩形，圆形...).但是，当我使用以上链接的方法时，我的所有形状都被连接起来了.有解决这个问题的方法吗?

The problem is this: this SVG is not a continuous one, it has some shapes (rectangles, circles...) which are not connected. But when I use the method of the link above all my shapes get connected. Is there someway to solve this problem?

推荐答案

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

There are two possible approaches I can think of to solve your problem.

1.又快又脏

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

As you loop through the path, calculate the distance from the last path point. If that distance exceeds some limit, you can consider that you have stepped into a new subpath. So begin a new polyline.

2.更准确但更棘手

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

Preprocess the path using the mypath.pathSegList property. That call returns a list of the path commands in the path.

1. 然后遍历pathSegList并记下每个移动命令的位置.这些标志着每个子路径的开始
2. 在遍历扁平化路径时，请调用mypath.getPathSegAtLength()函数.它以该长度返回patheg条目的索引.
3. 将其与您在步骤1中记录的数据进行比较，以查看是否已移至新的子路径
4. 如果有的话，开始一条新的折线(或多边形)

1. Then loop through the pathSegList and take note of where each move command is. These mark the start of each subpath
2. As you loop through flattening the path, call the mypath.getPathSegAtLength() function. It returns the index of the pathseg entry at that length.
3. Compare that with the data you recorded in step 1 to see if you have moved into a new subpath
4. If you have, start a new polyline (or polygon)

一个复杂的问题是，Chrome已弃用了对pathSegList属性的支持，而已为此使用了新的SVG2 API(mypath.getPathData()).幸运的是，Chrome有一个polyfill可以增加对旧API的支持.或者，您可以切换到新的API并使用其他的polyfill，以便新的API在较旧的浏览器上运行.

One complication is that Chrome has deprecated support for the pathSegList property, and have instead moved to the new SVG2 API for this (mypath.getPathData()). Fortunately there is a polyfill for Chrome to add back support for the old API. Or you can switch to the new API and use a different polyfill so that the new API works on older browsers.

您可以在此处找到有关两种填充物的详细信息

这篇关于SVG的getPointAtLength无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！