为什么Firefox不测量这个SVG路径的长度

Why will Firefox not measure the length of this SVG path

本文关键字:路径 SVG Firefox 测量 为什么      更新时间:2023-09-26

SVG:

<g fill="none" stroke-width="0.6">
    <path id="trouble" stroke-miterlimit="10" stroke="#ff5500" d="M1051.19,607.23c3.8-1.9,4.1,4.9,3.5,7c-0.7,2.3-2.6,4.6-5.3,3.8c-3.9-1.1-4.4-6.9-4-10.1c0.8-7.2,7.2-10.7,12.2-4.4c4.1,5.2,5.4,15.4,4.7,21.8c-0.5,4.4-3.3,10.4-8.8,8.1c-4.6-1.9-4.4-9.8-0.1-11.9c7.9-3.8,4.5,12.1-0.3,6.8"/>
</g>

Chrome和Firefox都正确地绘制了红色的小波浪。Chrome使用path.getTotalLength()正确测量路径长度。Firefox返回路径长度的NaN。为什么?

(我有几十个其他路径,Firefox可以正确测量其长度。特别是这个路径,使用Illustrator生成。语法对我来说是正确的AFAIK。)

参见:

http://codepen.io/anon/pen/oXpqqg

如果稍微调整路径以解决FF错误,就可以使其工作。

有一条曲线似乎触发了这个错误:

c0.8-7.2,7.2-10.7,12.2-4.4

如果你稍微改变一下,就可以避免这个错误:

c0.9-7.2,7.2-10.7,12.2-4.4

演示