1

我已经实现了一个基于 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 的使用是错误的?

你能推荐一个替代工具吗?

4

1 回答 1

1

如果您将 linarGradient 更改为 y1="0%" 和 y2="100%" 然后交换停止颜色的偏移量,您可以在 ImageMagick 中解决该错误。

于 2013-06-16T20:05:25.650 回答