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

Question

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

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

这是我的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 看起来像这样，

但是当我转换它时它看起来像这样，

那我该如何解决呢？ :(

Answer 1

那些日子我遇到过类似的事情，其中​​ svg 包含阿拉伯文字排版，它不仅是从右到左书写的，而且还有很多连字。我开始使用 imagemagick。为了使用正确的字体，需要在系统上安装字体，转换应该在系统上进行，在我们的例子中是网络服务器，我们无法在其中安装字体。但在本地环境中，我注意到 imagemagick 无法很好地处理文本方向和连字，因此我们需要找到另一种解决方案。最终获胜者是 apache batik project ，这是用java实现的。在这种情况下，我们很幸运，因为 shell_exec('java -jar …') 可能来自 php 端。如果您进入项目的示例/测试目录，您可以找到使用外部字体的图形，通过 @fontface {} 指令包含在内。使用 batik 时，什么做得很好，请记住所有路径都需要相对于 svg 本身。