javascript - 标准化 SVG 以方便存储

Question

我有一个 SVG 文件想要存储在数据库中。将所有对象存储为多边形并存储坐标将非常有帮助。然而，我使用的文件是从 Ilustrator 导出的。它确实包含多边形，但也包含变换后的矩形和其他形式。元素不必以绝对精度渲染，因此舍入误差不是问题。

如何转换转换后的矩形？

这样就可以了:

<polygon points="2694.423,2972.209 2685.76,2982.961 2702.282,2996.274
2710.938,2985.526   "/

并且可以存储为坐标列表。这是有问题的

<rect x="4316.474" y="2236.01" transform="matrix(-0.3208 -0.9471 0.9471 -0.3208 3591.1353 7063.0771)" width="22.991" height="15.92"/>

并且应该像第一个示例一样转换为多边形。

最终我想使用 html5 Canvas 来显示形状。

为了渲染多边形数据，我按以下方式使用 kinecticjs 框架:

    function poly (layer, points)
{
    var poly = new Kinetic.Line({
        points: points,
        fill: 'black',
        stroke: 'black',
        strokeWidth: 0,
        closed: true
      });
  // add the shape to the layer
  layer.add(poly);
  return poly;
}

canvas 与 svg 是否存在已知的性能问题？我有大约 3000 个可点击对象要渲染。

Answer 1

关于问题:

Are there know performance issues with canvas vs svg?. I have about 3000 clickable objects to render.

3000个元素没问题。但您不能在各个 Canvas 元素上包含事件。