javascript - path.node().getTotalLength() 挂起浏览器

Question

我正在尝试生成折线图，但在尝试使用函数 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)​">​</path>​

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

问候，琼

Answer 1

此函数可能存在两个不同的问题:

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

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

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

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

<强>2。问题可能是你的路径很复杂(150kb)

在这种情况下，您可以尝试使用像 Peter Collingridge SVG Minifier 中的 SVG 缩小器/简化器来简化您的路径。或其他人。