在KineticJS中加载SVG

Question

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

现在通过不同软件导出的SVG也有很大不同,比如说在通过Adobe Illustrator导出的SVG中有填充,笔划,笔划宽度等等.作为各自标签的属性,而通过Inkscape导出的SVG具有所有这些即填充,笔划,笔触宽度等.作为其各自标签的"样式"属性的字符串值.

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

1. 有没有可用的工具,它可以将所有原始(行,矩形,圆形等)标记转换为路径标记？即,它们不是rect和ellipse标签,而是转换为等效的路径标签.
2. 除了KJS之外,还有其他方法可以将SVG加载到画布上吗？

Answer 1

不幸的是你不能drawImageSVG到Canvas(测试).

但您可以使用canvg以自定义KineticJS形状(测试)绘制SVG :

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