时间戳

首页 > 解决方案 > 在不更改字体的情况下将 SVG 转换为 PNG

javascript - 在不更改字体的情况下将 SVG 转换为 PNG

问题描述

我正在尝试制作一个简单的应用程序，它从用户那里获取文本并编辑 svg 文件中的文本（从 illustrator 生成）并将最终结果发送回用户。

我可以在 javascript 中更改 SVG 文件文本，但在将其转换为 png 时遇到问题。当我这样做时，它会变成不同的机器人字体。

这是我的svg

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2248.1 769.99">
    <defs>
        <style>
            .cls-1{
                font-size:350px;
                font-family:Granger-Regular, Granger;
            }
        </style>
    </defs>
    <title>test</title>
    <text class="cls-1" x="50%" y ="50%" >
        <tspan  text-anchor="middle">Example</tspan>
        <tspan  text-anchor="middle" x="50%" y ="50%" dy="300">SVG</tspan>
    </text>
</svg>

这是我用来转换的代码，

var fs = require('fs')
  , gm = require('gm');

gm('./../src/images/test.svg')
    .write('./../src/images/test.png', function (err) {
        //console.log(err)
        if (!err) console.log('done');
    });

SVG看起来像这样，

在此处输入图像描述

但是当我转换它看起来像这样， 在此处输入图像描述

那么我该如何解决呢？:(

标签： javascriptnode.jssvgimagemagickgraphicsmagick

解决方案

所以这也是我的问题。根据我的研究，我制作了一个有效的 POC 来解决这个问题陈述。请阅读自述文件以了解项目本身。

Github：https ://github.com/nirus/SVG-PNG-Convert

我已经编译了我遇到的所有问题以及解决它的解决方案。试试看！

推荐阅读