我有以下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);

从下图可以看出,渐变应用错误。

pdf - SVG-&gt; TCPDF梯度不匹配-LMLPHP

基于插图图像,TCPDF似乎将渐变的中心应用于底部边缘。如果我手动将中心移到顶部边缘,则它看起来非常接近原始边缘。

知道我该如何解决吗?

最佳答案

我认为这是因为rect的位置。它实际上是从 View 框外部开始的,然后渐变和框都被转换。例如,框和渐变x参数均为-400。这太复杂了,我认为某些参数会被$fitonpage=true参数取消,或者翻译的应用方式有所不同:
<rect x="-400" y="-75" rx="0" ry="0" width="800" height="150" style="... transform="translate(400.5 75.5)"/>
根据提供的示例,这种欺骗实际上没有任何意义。唯一的目的似乎是修改渐变的开始和结束颜色。我只是将rect移动到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" />

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

pdf - SVG-&gt; TCPDF梯度不匹配-LMLPHP

关于pdf - SVG-> TCPDF梯度不匹配,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44108860/

10-11 20:41