为什么我的SVG贝塞尔曲线在Firefox中断裂? [英] Why are my SVG bezier curves broken in Firefox?

问题描述

我今天遇到一个问题，当我通过getPointAtLength创建图表时，我创建的图表无法在Firefox中使用.这是显示问题的小提琴:

I came across a problem today where diagrams I have created are not working in Firefox when created via getPointAtLength. Here is a fiddle showing the problem:

http://jsfiddle.net/xfpDA/9/

在javascript顶部的注释.

Note comments at the top of the javascript.

SVG路径的相关部分是:

The relevant part of the SVG path is:

C189.5,423.237,266.965,390.696,266.965,390.696

这在Chrome和IE上完美运行，但是Firefox跳过了曲线，仅关闭了路径.

This works perfectly in Chrome and IE, but Firefox skips right over the curve and just closes the path.

但是，曲线的微小变化就足以解决问题:

However, a tiny change to the curve is enough to fix the problem:

C189.5,423.236,266.965,390.696,266.965,390.696
             ^

为什么将该值改变千分之一才能使漂亮的曲线和断裂的SVG有所区别?

Why does changing that value by a thousandth make the difference between a pretty curve and a broken SVG?

该坐标不是唯一可以更改以解决"问题的坐标，因此，Firefox在使用高精度曲线值时似乎无法很好地发挥作用.

That coordinate is not the only one that can be changed to 'fix' the problem, so it appears that Firefox does not play nicely with high-precision curve values.

推荐答案

Firefox在某些情况下(例如delta = 0/0)无法计算曲线的长度.因此，该路径部分的结果为NaN/0/undefined，因此未添加到总长度中，并且getPointAtLength的域较小.

Firefox is not able to calculate the length of the curve under some circumstances (e.g. delta=0/0). So the result for that path part is NaN/0/undefined and therefore is not added to the total length and the domain for getPointAtLength is smaller.

这篇关于为什么我的SVG贝塞尔曲线在Firefox中断裂?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！