svg - 在 KineticJS 中加载 SVG

Question

我正在尝试加载 SVG 文件并想使用 KineticJS (KJS) 在 Canvas 上显示它，所以想知道是否可以使用 KJS 在 Canvas 中显示任何具有随机形状和路径的 SVG 文件？

现在通过不同的软件导出的SVG也有很大的不同，比如说通过Adobe Illustrator导出的SVG中有填充、描边、描边宽度等作为它们各自标签的属性，而通过Inkscape导出的SVG具有所有这些IE填充、描边、描边宽度等。作为它们各自标签的“样式”属性的字符串值。

因此，我即将编写自己的 SVG 解析器，特定于 AI 导出的 SVG 格式，然后使用它通过 KJS 在 Canvas 上重新绘制 SVG。但在此之前，我只想检查一下:

是否有任何可用的工具可以将所有原始(线、矩形、圆等)标签转换为路径标签？ IE。它们被转换为等效的路径标签，而不是 rect 和 ellipse 标签。

除了 KJS 之外，还有其他方法可以将 SVG 加载到 Canvas 上吗？

Answer 1

不幸的是你不能drawImage SVG 到 Canvas ( test )。

但是你可以使用 canvg以自定义 KineticJS 形状( test )绘制 SVG:

var drawSvg = new Kinetic.Shape ({
  x: 10, y: 10,
  drawFunc: function (canvas) {
    canvas.getContext().drawSvg (svgSource, 0, 0, 25, 25)
  }
}); layer.add (drawSvg)