pdf - SVG -> TCPDF 渐变不匹配

Question

我有以下 SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="150" viewBox="0 0 800 150" xml:space="preserve">
<linearGradient id="SVGID_0" gradientUnits="userSpaceOnUse" x1="-400" y1="-150" x2="-400" y2="0">
<stop offset="0%" style="stop-color:rgb(255,64,64);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(230,57,155);stop-opacity: 1"/>
</linearGradient>
<rect x="-400" y="-75" rx="0" ry="0" width="800" height="150" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: url(#SVGID_0); fill-rule: nonzero; opacity: 1;" transform="translate(400.5 75.5)"/>
</svg>

我正在使用 TCPDF 将其转换为 PDF:

$pdf->ImageSVG($file='images/testsvg.svg', $x=0, $y=0, $w='', $h='', $align='', $palign='', $border=0, $fitonpage=true);

如下图所示，渐变应用错误。

根据插画图像，TCPDF 似乎将渐变中心应用于底部边缘。如果我手动将中心移动到顶部边缘，那么它看起来非常接近原始。

知道如何解决这个问题吗？

Answer 1

我认为这是因为 rect 的定位方式。它实际上是从 viewbox 外面开始的，然后渐变和 box 都被转换了。例如盒子和渐变 x参数都是-400。这太复杂了，我认为一些参数被 $fitonpage=true 抵消了。参数或翻译的应用方式不同:

<rect x="-400" y="-75" rx="0" ry="0" width="800" height="150" style="... transform="translate(400.5 75.5)"/>

根据提供的示例，这种欺骗实际上没有任何意义。唯一的目的似乎是修改渐变的开始和结束颜色。我只是将矩形移动到从 0,0 开始，删除变换，然后修改渐变颜色和停止以正确的方式实现相同的效果:

<linearGradient y2="150" x2="0" y1="0" x1="0" gradientUnits="userSpaceOnUse" id="SVGID_0">
<stop
       style="stop-color:#f13c73;stop-opacity:1"
       id="stop4139"
       offset="0" />
<stop
       style="stop-color:#e6399b;stop-opacity:1"
       id="stop4141"
       offset="0.40" />
</linearGradient>
<rect
     id="rect4143"
     style="opacity:1;fill:url(#SVGID_0);fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none"
     height="150"
     width="800"
     ry="0"
     rx="0"
     y="0"
     x="0" />

重要的变化是移除矩形和渐变上所有奇怪的负偏移，以及渐变停止颜色和位置的变化以重新创建相同的渐变，而无需使用裁剪和变换。