Javascript 在画布中使用svg对象而不是raste图像对象

我正在尝试使用JavaScript和canvas创建一个类似的应用程序

我使用kineticjs作为画布库创建了一个草稿。牙齿都是png图像，线条由kinetic js使用Line对象绘制

我的一个朋友建议我把所有的东西都画成一个大的svg（牙齿和线条），其中每个牙齿和线条都是另一个可分辨的路径。用可分辨的id将其加载到画布上，并使用id操作它们

我试图阅读kineticjs文档和fabricjs对象，但没有找到类似的内容。我的意思是使用fabricjs或kineticjs将svg存储并加载到画布上。然后库应该解析它并在画布上创建svg，我可以通过id操作它们

有可能吗？我对svg图形非常陌生。这可能是我的想法吗

我目前正在使用KineticJS加载牙齿作为图像

Periodontogram.prototype.initializeImageObjects = function (){
    var obj = this;
    if (this.DEBUG){
        console.log("initializing ImageObjects:")
    }
    var check = function (item){return item !== undefined;}
    var url = this.options.url; 
    var imageObj;
    var image;

    this.options.imageFilenames.forEach(function (filename, index){
        if (obj.DEBUG){
            console.log("Loading "+filename+" image");
        }
        var src = url+'/'+filename;
        imageObj = new Image();
        imageObj.src  = src;
        imageObj.onload = function (){
            if (obj.DEBUG){
                console.log("Image "+src+" successfully loaded");
            }
            image = new Kinetic.Image({
                x:0,
                y:0,
                id: filename.split('.')[0],
                width: this.width,
                height: this.height,
                image:this
            });
            obj.imageObjects[index] = this;
            obj.teethImages[index] = image;
            if (obj.imageObjects.filter(check).length === obj.options.imageFilenames.length )    {
                if (obj.DEBUG){
                    console.log("All Images loaded successfully");
                    console.log("ready to call rest methods")
                }
                obj.positionImages();
                obj.createLineGroups();
                obj.createLabelGroups()
                obj.createStage();
                obj.drawOnScreen();
                $("#"+obj.container).width(obj.stage.getWidth());
                $("#"+obj.container).height(obj.stage.getHeight ());
                obj.callback();
                $.event.trigger({
                    type:'finishLoading',
                    obj: obj
                });

            }

        };

    });

}

---

我希望所有这些都被加载一个完整的svg所取代，它由齿和线组成。

FabricJS将将现有的单个svg URL/字符串转换、分解和重新组合为Fabric.PathGroup。然后，您可以使用

mySvgGroup.getObjects（）

获取您可以根据需要操纵的各个齿径

KineticJS将接受单个SVG齿的路径数据，并将其显示在画布上

不过，为每个牙齿创建单独的SVG路径并将这些单独的SVG输入KineticJS或FabricJS可能更灵活

然后，您可以根据需要通过id操作它们：

• 使用[x，y]坐标放置每个单独的齿
• 调整大小而不进行像素化
• 将每个牙齿分组，并在牙齿上做注释/绘图

---

您尝试了什么，能否与我们共享代码？目前，我使用KineticJs，并将所有内容加载为png图像，使用Kinetic.image表示牙齿，使用Kinetic.Line表示水平平行线。我在任何地方都找不到如何使用svg图像以及如何使用KineticJS或Fabric操作svg的某些部分。现在有很多代码。我可以举一些我如何加载图像的例子。