fabric.js 未在 SVG 中导出答案

【问题标题】：fabric.js not exporting in SVGfabric.js 未在 SVG 中导出
【发布时间】：2015-02-16 18:53:08
【问题描述】：

我正在尝试将我的画布保存为 SVG（包括文本和 SVG）。

我做了一个 console.log(canvas) 并且所有的对象都在那里。尝试仅导出文本，然后仅导出 svg，但仍然无法正常工作。

控制台展示：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

使用 Fabric.js 1.4.0 创建

// Obtain a canvas drawing surface from fabric.js
        var canvas = new fabric.Canvas('c');
        canvas.setHeight(500);
        canvas.setWidth(800);

        canvas.on('object:selected', function(e){
            console.log("sdfsdf");
        })

        // Create a text object.
        // Does not display it-the canvas doesn't
        // know about it yet.
        var hi = new fabric.Text('random text', {
            fontFamily: "agero",
            left: canvas.getWidth() / 2,
            top: canvas.getHeight() / 2     
        });

        var hi2 = new fabric.Text('helo', {
            fontFamily: "error404",
            left: 0,
            top: 0     
        });

        // Attach it to the canvas object


        setTimeout(function() {
           canvas.add(hi);
           canvas.add(hi2);
        }, 500);


        fabric.loadSVGFromURL('svg/1000.svg', function(objects, options) {
            var obj = fabric.util.groupSVGElements(objects, options);


            // ...any code for special handling of the loaded object


            // put object on the canvas
            canvas.add(obj);
        });



        console.log(canvas.toSVG());

感谢大家的帮助。

【问题讨论】：

标签： canvas svg fabricjs

【解决方案1】：

删除 settimeout 并将对象直接添加到画布，您将获得添加对象的画布的 svg 或者如果您需要 settimeout 而不是在 settimeout 函数中移动 console.log 语句（如下所示）。您将根据您的要求获得输出。

setTimeout(function() {
       canvas.add(hi);
       canvas.add(hi2);
       console.log(canvas.toSVG());
    }, 500);

【讨论】：

【解决方案2】：

使用您的 ID 创建一个 div 并在 Javascript 中调用它。

document.getElementById('YOUR ID').innerHTML=canvas.toSVG();

【讨论】：