我已经实现了一个基于 json 输入文件生成自定义扑克牌的 go 脚本。输出为 svg。为了打印卡片,我需要将其转换为 png。因此我安装了 ImageMagick。
我正在使用转换命令行工具:
convert output.svg output.png
这是 svg 标记:
<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="630" height="891"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="h" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="red" stop-opacity="1.00"/>
<stop offset="100%" stop-color="rgb(255,255,255)" stop-opacity="1.00"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="630" height="891" style="fill:black"/>
<rect x="10" y="10" width="610" height="871" style="fill:url(#h)"/>
<text x="20" y="89" style="fill:black;font-size:30pt;text-anchor:start">1 Sold</text>
<text x="610" y="89" style="fill:black;font-size:30pt;text-anchor:end">Gegenstand</text>
<line x1="20" y1="98" x2="610" y2="98" style="stroke:black;stroke-width:3"/>
<text x="20" y="151" style="font-family:monospace;fill:black;font-size:25pt;text-anchor:start">Bogen</text>
<text x="20" y="534" style="fill:black;font-size:20pt;text-anchor:start">Wird in einer Schmiede hergestellt</text>
<text x="20" y="579" style="fill:black;font-size:20pt;text-anchor:start"></text>
<text x="20" y="623" style="fill:black;font-size:15pt;text-anchor:start">Vor dem Kampf hat der Bogenschütze eine Wahrscheinlichkeit</text>
<text x="20" y="641" style="fill:black;font-size:15pt;text-anchor:start">von 4,5,6 dass der dem Gegner einen Lebenspunkt abzieht</text>
</svg>
如果将其粘贴到 svg 文件中并在浏览器中打开,您可以看到背景是一个带有线性渐变的矩形。卡片的底部是红色的,向上逐渐变成白色。将文件转换为 png 后,它看起来像这样:
卡片上的语言是德语,但文字并不重要。它被正确渲染。问题是倒梯度。起初我用 Gimp 设计卡片,但后来我决定自动化这个过程。不幸的是,我已经打印了很多这样的卡片,并希望保持布局一致。
我很确定翻转的渐变不是我的错。Chrome、Firefox 和 Internet Explorer 显示相同的图像。也许我对 ImageMagick 的使用是错误的?
你能推荐一个替代工具吗?