ImageSVG TCPDF can't render text filled with linearGradient

user_15774560 0
Viewed 22

I have an SVG file like this and I use it for export and PDF with TCPDF ImageSVG function. But somehow, the output PDF looks like this https://prnt.sc/UicMONwIAQTZ. Background gradient color replace by text gradient color and text get wrong gradient

Does anyone know why?

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="472.4409448875" height="354.33070866562497" viewBox="0 0 773 579.75" xml:space="preserve">
    <desc>Created with Fabric.js 3.4.0 and NBDesigner 2.7</desc>
    <defs>
        <linearGradient id="SVGID_3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.6111784539 0 0 0.6111784539 0 0) matrix(1 0 0 1 -386.5 -289.875)"  x1="0" y1="0" x2="773" y2="0">
            <stop offset="0%" style="stop-color:#e53934;"/>
            <stop offset="100%" style="stop-color:#ffd54f;"/>
        </linearGradient>
    </defs>
    <rect transform="matrix(1.6361833333 0 0 1.6361833333 0 0) translate(236.22047244375,177.16535433281248)" x="-236.22047244375" y="-177.16535433281248" width="472.4409448875" height="354.33070866562497" fill="url(#SVGID_3)"></rect>
    <g transform="matrix(1 0 0 1 395.6585945915 277.8812404668)" style=""  >
        <linearGradient id="SVGID_0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -265.1585945915 -79.6482715146)"  x1="0" y1="0" x2="530.3171891829131" y2="0">
            <stop offset="0%" style="stop-color:rgb(168,80,215);stop-opacity: 1"/>
            <stop offset="100%" style="stop-color:rgb(35,174,234);stop-opacity: 1"/>
        </linearGradient>
        <text xml:space="preserve" font-family="Roboto" font-size="140.9703920612807" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-265.1585945915" y="44.2844389621" >Heading</tspan></text>
    </g>
</svg>
tcpdf svg php
1 Answers

Did you try creating a react component around your SVG?

import React from "react";

export default function MySVG() {
    return (
           <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="472.4409448875" height="354.33070866562497" viewBox="0 0 773 579.75" xml:space="preserve">
                <desc>Created with Fabric.js 3.4.0 and NBDesigner 2.7</desc>
                <defs>
                 <linearGradient id="SVGID_3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.6111784539 0 0 0.6111784539 0 0) matrix(1 0 0 1 -386.5 -289.875)"  x1="0" y1="0" x2="773" y2="0">
                    <stop offset="0%" style="stop-color:#e53934;"/>
                     <stop offset="100%" style="stop-color:#ffd54f;"/>
                 </linearGradient>
                </defs>
               <rect transform="matrix(1.6361833333 0 0 1.6361833333 0 0) translate(236.22047244375,177.16535433281248)" x="-236.22047244375" y="-177.16535433281248" width="472.4409448875" height="354.33070866562497" fill="url(#SVGID_3)"></rect>
              <g transform="matrix(1 0 0 1 395.6585945915 277.8812404668)" style=""  >
              <linearGradient id="SVGID_0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -265.1585945915 -79.6482715146)"  x1="0" y1="0" x2="530.3171891829131" y2="0">
                   <stop offset="0%" style="stop-color:rgb(168,80,215);stop-opacity: 1"/>
                   <stop offset="100%" style="stop-color:rgb(35,174,234);stop-opacity: 1"/>
               </linearGradient>
              <text xml:space="preserve" font-family="Roboto" font-size="140.9703920612807" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-265.1585945915" y="44.2844389621" >Heading</tspan></text>
              </g>
             </svg>
    )
}

If this is not what your talking about, You may need to to adjust the viewbox attribute. That is how you align the svg in it boundingbox.

user_90454080
Related