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

【问题标题】：rendering svg path data serverside with node.js使用 node.js 渲染 svg 路径数据服务器端
【发布时间】：2019-06-20 12:23:21
【问题描述】：

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

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

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

我希望图像底部的 D 能够正确显示，但事实并非如此。

有谁知道如何解决这个问题，或者有没有其他方法可以渲染图像？

提前致谢！

顺便说一句，这是我的第一篇文章，如果我遗漏了什么，非常抱歉:)

【问题讨论】：

标签： javascript node.js html5-canvas

【解决方案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);
});

【讨论】：