我有以下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似乎将渐变的中心应用于底部边缘。如果我手动将中心移到顶部边缘,则它看起来非常接近原始边缘。
知道我该如何解决吗?
最佳答案
我认为这是因为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-> TCPDF梯度不匹配,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44108860/