Question

我正在创建一个svg路径分析器，并希望向用户显示分析器选择的路径。如何使用svg转换服务器端呈现svg路径数据

前端我可以使用Path2D将svg路径数据转换为画布，但是服务器端有点棘手。我已经尝试过可以工作的canvas和canvas-5-polyfill包，但是canvas-5-polyfill不喜欢绝对运动，而且我不知道如何解决。

看看： https://repl.it/repls/ThoroughPeacefulMenu

我希望图像底部的D能够正确显示，但不能正确显示。

有人知道如何解决这个问题，还是有其他方法可以渲染图像？

谢谢！

顺便说一句，这是我的第一篇文章，对不起，如果我什么都不见了：）

Answer 1

对于那些像我一样遇到同样问题的人，这就是我为解决这个问题所做的。我最终使用了SVG.js和svgdom。

const window = require('svgdom')
const SVG = require('svg.js')(window)
const document = window.document

var fs = require('fs');
var data = {
    dims: {
        width: 755.90533,
        height: 755.90533
    },
    raster: {
        commands: ['M 339.624,237.408 H 56.159 v 283.464 h 283.465 z',
            'm 0,0 c 1.157,-0.21 2.84,-0.263 4.628,-0.263 9.784,0 15.096,5.47 15.096,15.043 0.052,8.363 -4.681,13.675 -14.359,13.675 -2.367,0 -4.155,-0.21 -5.365,-0.474 z m -4.576,31.348 c 2.788,0.421 6.101,0.737 9.731,0.737 6.574,0 11.255,-1.525 14.359,-4.419 3.155,-2.893 4.996,-6.995 4.996,-12.728 0,-5.786 -1.788,-10.52 -5.102,-13.781 -3.313,-3.313 -8.783,-5.101 -15.674,-5.101 -3.26,0 -5.996,0.157 -8.31,0.421 z'
        ],
        transform: [
            [1.3333333, 0, 0, -1.3333333, 0, 755.90533],
            [1.3333333, 0, 0, -1.3333333, 71.02479822438, 611.67693360571]
        ]
    }
};

const draw = SVG(document.documentElement).size(data.dims.width, data.dims.height)
draw.clear()
var raster = draw.group()

if (typeof(data.raster.commands) !== 'undefined') {
    for (var i = 0; i < data.raster.commands.length; i++) {
        var transform = data.raster.transform[i];
        var matrix = new SVG.Matrix(transform[0], transform[1], transform[2], transform[3], transform[4], transform[5])

        var path = draw.path(data.raster.commands[i]);
        path.fill('none')
        path.transform(matrix)
        path.stroke({
            color: '#000000'
        })
        raster.add(path)
    }
}
var visfile = 'test.svg';
fs.writeFile(visfile, draw.svg(), function(err) {
    console.log(err);
});

使用node.js在服务器端渲染svg路径数据

1 个答案: