рендеринг данных о путях SVG на сервер с помощью node.js

Question

Я создаю анализатор путей svg и хочу показать пользователю пути, по которым анализатор подобрал. как мне отрисовать данные пути svg с помощью svg transformation serveride

Внешний интерфейс Я могу использовать 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);
});