3

我正在尝试生成折线图，但在尝试使用函数 getTotalLength() 获取 svg 路径的长度时遇到错误。这对我来说很奇怪，因为 Firefox 19.0.2 运行良好，但 Safari 6.0.2 和 Chrome 25.0.1364.160 挂起。

发生错误的代码如下：

          function displayValueLabelsForPositionX(xPosition) {
            if (typeof jsondata.length == 'undefined') {
                return;
            }

            // position label values
            var pathEl = path.node();     
            var pathLength = pathEl.getTotalLength();

           (...)
         }

错误总是发生在对 pathEl.getTotalLength() 的调用中，并且路径似乎是正确的，但长度为 150KB：

<path class=​"line" d=​"M0.0020634675065341434,384.8476217601823C0.002751290008712191,384.8476217601822,0.0034391125108902388,384.8476217601822,0.004126935013068286,384.8476217601823C0.0048147575152463346,384.8476217601822,0.005502580017424381,384.8476217601822,0.006018446894057917,384.8476217601823C0.006534313770691453,384.8476217601822,0.006878225021780477,384.8476217601822,0.61216202693

(...)

1006.9979365324934,312.1617772714327" clip-path=​"url(#clip)​">​&lt;/path>​

任何想法 ？如果没有这个功能，还有其他方法可以得到这个长度吗？

问候，琼

4

1 回答 1

-1

这个函数可能有两个不同的问题：

var pathLength = pathEl.getTotalLength();  // Causes reflow of document!!

1.问题可能是，这个函数被多次调用，每次都会导致文档重排。

一个解决方案可能是自己计算/近似路径的长度。如果路径相当简单并且您了解它是如何构建的，那效果很好。

可能的简单路径

您可以尝试使用“毕达哥拉斯”定理（哇，我从没想过在编程中需要它！）或其他几何公式来近似路径长度，以接近您的需要。它在任何方面都比使用 getTotalLength() 快得多。

2.问题可能是你的路径非常复杂（150kb）

在这种情况下，您可以尝试使用 SVG Minifier / Simplifier 来简化您的路径，例如Peter Collingridge SVG Minifier或其他的。

于 2021-08-11T23:22:54.780 回答