fabric.js 导出为带有圆圈的 svg 问题

Question

当导入圆形对象然后导出为 svg 时，它们变成了不可见的路径。我做错了什么或错误吗？

  <path d="M 90 0 A 90 90 0 0 1 90 1.256933281983528e-12" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform="translate(1329.1 559.64) "/>

查看fiddle示例点击导出，看看手动添加的svg是如何正确的<circle /> http://jsfiddle.net/nwkdzss2/

Answer 1

这是一个四舍五入的问题。你有这些参数：

  "startAngle":0,
  "endAngle":6.2831853071796,

它们被解释为大于 2π，并且出于某种原因，将大角度标志（A 之后的第四个数字）翻转为 false，并且只有两点之间的 "short path"绘制：

d="M 90 0 A 90 90 0 0 1 90 1.256933281983528e-12"

如果 2π 使用稍微小一点的数字，

  "startAngle":0,
  "endAngle":6.2831853,

路径数据被解释为使用 "long way"。

d="M 90 0 A 90 90 0 1 1 90 -6.461627453714901e-7"

完全关闭这些参数将绘制一个圆形图元。

fabric.js 导出为带有圆圈的 svg 问题

fabric.js exporting as svg issue with circles

javascript

svg

fabricjs