SVG 无法在 CentOS 6 中使用 inkscape 正确呈现

Posted 2023-03-10

【中文标题】SVG 无法在 CentOS 6 中使用 inkscape 正确呈现

【英文标题】：SVG not rendering properly in CentOS 6 using inkscape

【发布时间】：2017-06-16 13:33:46

【问题描述】：

下面是svg

<svg   xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 330">
<g transform="translate(96,0)">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="none" x="12.4844" y="-42.5" viewBox="0 0 15 27">
        <g transform="translate(0, 0) scale(1,1)">
            <text text-anchor="middle" uuid="a1f8607b-7dd2-4cd0-89b0-c09610e1702f" stroke-linecap="round" stroke-linejoin="round" y="15" stroke="rgb(255,0,0)" stroke- fill="rgb(0,0,0)" ng-if="text.type=='text'" ng-style="'font-family':text.font,'letter-spacing':text.space.value/2,'text-shadow':'4px 4px' + text.shadowColor" font-size="24px" style="font-family: Arial; letter-spacing: 0px;" class="">
                <tspan x="50%" class="text_tspans" y="0" dy="22"> A </tspan>
            </text>
        </g>
    </svg>
</g>
<g transform="translate(18,0)">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="none" x="89" y="190" viewBox="0 0 16 27">
        <g transform="translate(0, 0) scale(1,1)">
            <text text-anchor="middle" uuid="bf336f6e-1187-485d-8e4d-2e81cbe649bf" stroke-linecap="round" stroke-linejoin="round" y="15" stroke="rgb(255,0,0)" stroke- fill="rgb(0,0,0)" ng-if="text.type=='text'" ng-style="'font-family':text.font,'letter-spacing':text.space.value/2,'text-shadow':'4px 4px' + text.shadowColor" font-size="24px" style="font-family: Arial; letter-spacing: 0px;" class="">
                <tspan x="50%" class="text_tspans" y="0" dy="22"> B </tspan>
            </text>
        </g>
    </svg>
</g>
<g transform="translate(15.5,0)">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="none" x="92.5" y="-11" viewBox="0 0 17 27">
        <g transform="translate(0, 0) scale(1,1)">
            <text text-anchor="middle" uuid="1be15796-ee94-468b-8c5a-0034d08071fd" stroke-linecap="round" stroke-linejoin="round" y="15" stroke="rgb(255,0,0)" stroke- fill="rgb(0,0,0)" ng-if="text.type=='text'" ng-style="'font-family':text.font,'letter-spacing':text.space.value/2,'text-shadow':'4px 4px' + text.shadowColor" font-size="24px" style="font-family: Arial; letter-spacing: 0px;" class="">
                <tspan x="50%" class="text_tspans" y="0" dy="22"> C </tspan>
            </text>
        </g>
    </svg>
</g>
<g transform="translate(19.5,0)">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="none" x="171" y="97" viewBox="0 0 17 27">
        <g transform="translate(0, 0) scale(1,1)">
            <text text-anchor="middle" uuid="9313b2c9-3329-4f94-8d77-08501ac2b46d" stroke-linecap="round" stroke-linejoin="round" y="15" stroke="rgb(255,0,0)" stroke- fill="rgb(0,0,0)" ng-if="text.type=='text'" ng-style="'font-family':text.font,'letter-spacing':text.space.value/2,'text-shadow':'4px 4px' + text.shadowColor" font-size="24px" style="font-family: Arial; letter-spacing: 0px;" class="">
                <tspan x="50%" class="text_tspans" y="0" dy="22"> D </tspan>
            </text>
        </g>
    </svg>
</g>
<g transform="translate(15,0)">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="none" x="2" y="108" viewBox="0 0 16 27">
        <g transform="translate(0, 0) scale(1,1)">
            <text text-anchor="middle" uuid="9692a0ca-4e96-4e9e-8c34-b13e7a1357de" stroke-linecap="round" stroke-linejoin="round" y="15" stroke="rgb(255,0,0)" stroke- fill="rgb(0,0,0)" ng-if="text.type=='text'" ng-style="'font-family':text.font,'letter-spacing':text.space.value/2,'text-shadow':'4px 4px' + text.shadowColor" font-size="24px" style="font-family: Arial; letter-spacing: 0px;" class="">
                <tspan x="50%" class="text_tspans" y="0" dy="22"> E </tspan>
            </text>
        </g>
    </svg>
</g>
<g transform="rotate(0,107.48,134.5) translate(23.5,0)">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="none" x="83.98" y="106.5" viewBox="0 0 23 27">
        <g transform="translate(0, 0) scale(1,1)">
            <text text-anchor="middle" uuid="4345edda-f9ae-4eaa-8498-fca84506e89b" stroke-linecap="round" stroke-linejoin="round" y="15" stroke="rgb(255,0,0)" stroke- fill="rgb(0,0,0)" ng-if="text.type=='text'" ng-style="'font-family':text.font,'letter-spacing':text.space.value/2,'text-shadow':'4px 4px' + text.shadowColor" font-size="24px" style="font-family: Arial; letter-spacing: 0px;" class="">
                <tspan x="50%" textLength="0"               dlengthAdjust="spacingAndGlyphs" y="0" dy="22" class="text_tspans">/-\</tspan>
            </text>
        </g>
    </svg>
</g>
</svg>

粘贴在此处的 SVG 代码将在 InkScape 而不是任何浏览器上正常运行。

现在的问题是，当我们使用命令 inkscape -z -e 1.png -w 在 CentOS7 上使用 inkscape 最新版本“0.91 r13725 (Nov 5 2016)”转换图像时480 -h 570 1.svg我们得到如下图

但是当我们在 CentOS6 上使用 inkscape 版本 0.47 r22583 (Jul 29 2015) 使用与上述相同的命令进行转换时

谁能告诉我问题是什么？已经尝试了所有替代方案，每项工作都可以解决它。但目前无法做到。

亲切的问候

【参考方案1】：

现在的问题是，当我们在 CentOS7 上使用 inkscape 最新版本“0.91 r13725 (Nov 5 2016)”转换图像时...我们得到以下图像

但是当我们在 CentOS6 上使用 inkscape 版本 0.47 r22583（2015 年 7 月 29 日）使用与上述相同的命令进行转换时

您正在使用两个完全不同版本的软件并获得不同的结果。这……并不意外。

如果您想要完全相同的结果，请尝试在两台机器上使用完全相同版本的软件。这可能需要您自己安装所需的版本。

【讨论】：

我已经知道这是问题所在。但是我该如何克服呢？难道我不能在 SVG 代码中改变一些东西来获得标准化的输出吗？无论版本是否不同，它都应该显示相同的结果。

"尝试在两台机器上使用完全相同版本的软件。这可能需要您自己安装所需的版本。"

不，这不是在本地安装版本的选项，我们需要降级到 CentOS6，正如我之前提到的那样。

我们需要将上面给出的 SVG 改成标准化的 SVG，这样它就可以在任何机器、平台或版本上运行，并且无论如何都给出相同的输出。