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

Question

I'm creating a svg path analyser and want to show the user the paths that the analyser picked up on. how do i render svg path data with svg transformation serverside

Front-end I am able to use Path2D to turn svg path data into a canvas, but serverside is a bit tricky. I've tried the packages canvas and canvas-5-polyfill, which works, but canvas-5-polyfill does not like absolute movements and I dont have the know how to fix that.

Have a look at: https://repl.it/repls/ThoroughPeacefulMenu

I'd expect the D at the bottom of the image to display correctly, but it doesn't.

Does anyone know how to address this proplem, or is there any other way I can render the image?

Thanks in advance!

btw, this is my first post, so sorry if I'm missing anything :)

Answer 1

For anyone struggling with the same problem as I did, This is what I did to solve it. I ended up using SVG.js and 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);
});