SVG & # 8594; TCPDF gradient mismatch
I have the following 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>
I am converting this to PDF using TCPDF:
$pdf->ImageSVG($file='images/testsvg.svg', $x=0, $y=0, $w='', $h='', $align='', $palign='', $border=0, $fitonpage=true);
As you can see in the image below, the gradient isn't being applied correctly.
Based on the illustrator's image, TCPDF appears to be applying the center of the gradient to the bottom edge. If I manually move the center to the top edge, it looks very close to the original.
Any idea how I can fix this?
source to share
I think this is because of how the rectangle is positioned. It actually runs outside of the viewport and then both the gradient and the window are transformed. For example, the margin and gradient parameter x
are -400. It's too complicated and I think some options are overridden by the parameter $fitonpage=true
, or the translations are applied differently:
<rect x="-400" y="-75" rx="0" ry="0" width="800" height="150" style="... transform="translate(400.5 75.5)"/>
According to the examples given, there is no point in this deception. The sole purpose is to change the colors of the start and end of the gradient. I would just move rect to start at 0,0, remove transforms, then change the gradient colors and stop to achieve the same effect in the correct way:
<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" />
The changes that matter are removing all the strange negative offsets on the rectangle and gradient, and changing the colors and stop position of the gradient to recreate the same gradient without the need for clipping and transforming.
source to share