Opera中绘制的SVG圆弧很隐蔽的一个bug
Opera浏览器对于SVG bug可不少，而且低级。今天又碰见一个Opera SVG bug.
应用场景是这样：绘制一段很简单的SVG圆弧，移动，保存，再打开，发现圆弧方向竟然变了。
不知道是不是巧合，两年前我写过一篇blog说Opera对Canvas Context 2D的实现中的圆弧指令也有方向反了的bug，看来Opera的工程师是一辈子闹不清圆弧这种高级货了！
分析得知，圆弧的路径属性被Opera错误的修改了。
bug分析重现：绘制圆弧，查看path d属性；脚本移动圆弧，再查看它的path d属性，发现圆弧指令的7个参数中两个表示圆弧方向的标记largeArcFlag和sweepFlag颠倒了.
进一步测试发现，根本不需要移动，只要读取了圆弧路径的pathSegList属性，就会出现这个问题。
例如原来是 <path d="M 40 30A 4 5 0 1 0 40 20" stroke="#000000" stroke-width="1" fill="none" />
读取后成了 <path d="M 40 30A 4 5 0 0 1 40 20" stroke="#000000" stroke-width="1" fill="none" />
1,0对调会变成0,1，0,1对调会变成1,0，1,1和0,0因为对调了不变所以没出错。
之所以说隐蔽，是因为移动之后视觉上看不到任何不对劲，当你用代码去取得属性或者保存起来的时候，却获得了错误的值。
测试重现的代码
<?xml version="1.0" encoding="utf-8" standalone="no"?><svg viewBox="0 0 400 203" xmlns="http://www.w3.org/2000/svg"><path id="p1" d="M 40 30A 4 5 0 1 0 40 20" stroke="#000000" stroke-width="1" fill="none" /><script type="text/javascript"><![CDATA[var p = document.getElementById("p1"), console.log(p.getAttribute('d')); //打出原始的路径值var ss = p.pathSegList; //这里什么也没做，只是读取了一下pathSegList属性console.log(p.getAttribute('d')); //这里打出来的路径已经变掉了]]></script></svg>