Question

我正在尝试在SVG中保存我的画布（包括Text和SVG）。

我做了一个console.log（画布），所有对象都在那里。试图只导出文本，然后只导出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());

感谢您的帮助。

Answer 1

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

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

Answer 2

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

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

fabric.js不在SVG中导出

2 个答案: