KineticJS是否支持SVG库？

Question

我一直在寻找FabricJS和KineticJS作为我正在开发的项目的潜在解决方案，并且像FabricJS为SVG提供的库级支持一样。然而，由于缺乏缩放和平移功能，我需要更多。出于这个原因，我开始（再次）看KineticJS。

我在KineticJS文档中没有看到有关SVG支持的内容，我想知道是否有人可以告诉我KineticJS是否支持渲染SVG图像或不将其作为其框架的一部分。我认为就KineticJS而言，SVG只是另一个图像，因此在框架中应该这样处理。另外，当我在网上搜索有关SVG和canvas的文章时，我看到讨论页面和文章SVG或Canvas。我不认为这两者是相互排斥的。 <canvas>元素不是本地支持SVG吗？

Answer 1

正如您怀疑的那样，canvas和KineticJS都将SVG视为另一张图片。

是的，画布元素可以使用其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元素更多的支持。

Answer 2

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

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