KineticJS 是否有对 SVG 的库支持？答案

【问题标题】：Does KineticJS have library support for SVG?KineticJS 是否有对 SVG 的库支持？
【发布时间】：2013-07-09 00:27:04
【问题描述】：

我一直在将FabricJS 和KineticJS 视为我正在从事的项目的潜在解决方案，就像 FabricJS 对 SVG 的库级支持一样。然而，它缺乏缩放和平移功能让我想要更多。出于这个原因，我开始（再次）关注 KineticJS。

我在 KineticJS 文档中没有看到太多关于 SVG 支持的内容，我想知道是否有人可以告诉我 KineticJS 是否支持渲染 SVG 图像作为其框架的一部分。我假设就 KineticJS 而言，SVG 只是另一个图像，因此应该在框架中这样对待。

此外，当我在网上搜索有关 SVG 和画布的文章时，我会看到讨论 SVG 或 Canvas 的页面和文章。我不认为这两者是相互排斥的。 <canvas> 元素本身是否不支持 SVG？

【问题讨论】：

我们可能会在下个月左右支持放大 Fabric
@kangax 很酷，我会去找它。感谢您的信息！

标签： html canvas svg kineticjs fabricjs

【解决方案1】：

正如您所怀疑的，canvas 和 KineticJS 都将 SVG 视为另一个图像。

是的，canvas 元素可以使用其drawImage 来绘制 svg 图像。

是的，您也可以将 SVG 图像加载到 kineticJS 中：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 400,
    height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);

var img=new Image();
img.onload = function () {
    var image = new Kinetic.Image({
        image: img,
        x: 20,
        y: 20,
        width: 75,
        height: 75,
    });
    layer.add(image);
    layer.draw();

}
img.crossOrigin="anonymous";
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/rocket.svg";

另一方面，

FabricJS 对操作 SVG 元素有更多支持。

【讨论】：

drawImage(<svg>) 虽然不是完全跨浏览器。上次我测试时，Opera 12 不支持它——kangax.github.io/jstests/canvas-drawimage-svg我怀疑移动浏览器也可能有问题。
感谢您提供有关跨浏览器支持问题的详细信息。即使有这个警告，也要将此答案标记为已接受，因为我认为它回答了我最初的询问。 :)

【解决方案2】：

KineticJS 通过路径形状支持 SVG。这是一个教程：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/

【讨论】：

链接已断开。