issue on svg to pdf with not rendered

Question

I've the following svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="9 9 828 612" width="846" height="630" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <desc>Created with Fabric.js 2.3.0</desc>
    <defs></defs>
    <rect fill="rgb(255, 0, 0)" x="0" y="0" width="100%" height="100%" />
    <polygon style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 0.6;" transform="translate(297.4 360.15) scale(29.61)" points="10,10 -10,10 -10,-10" />
    <g transform="translate(82.75 177.5) rotate(45)">
        <text font-family="Amatic-Bold" font-size="40px" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(207,196,196); fill-rule: nonzero; opacity: 1; white-space: pre;" xml:space="preserve"><tspan x="-78.17" y="12.57">This is a text box</tspan></text>
    </g>
    <polygon style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 0.6;" transform="translate(619.63 230.38) rotate(180) scale(23.13)" points="10,10 -10,10 -10,-10" />
    <g transform="translate(507.63 90) rotate(45)">
         <text font-family="Amatic-Bold" font-size="40px" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(209,196,196); fill-rule: nonzero; opacity: 1; white-space: pre;" xml:space="preserve"><tspan x="-78.17" y="12.57">This is a text box</tspan></text>
    </g>
</svg>

And i'm using TCPDF method:

$pdf->ImageSvg(@theSvgString, ...);

However, the red rectangle (rect fill="rgb(255, 0, 0)" x="0" y="0" width="100%" height="100%") doesn't show up in the generated pdf

score 0 · Answer 1 · answered Sep 11 '18 at 14:24

0

The problem seems to be in the width and height. Setting width="846" and height="630" everything goes ok. The problem is that the wrong part is generated by fabric.js

answered Sep 11 '18 at 14:24

Ricardo Carvalho

393
1
3
17

I've to correct my statement: the svg output generated by fabric.js is well formated, according to svg specification the width attribute can be a percentage. As so the issue seems to be with TCPDF that fails to read the pecentage – Ricardo Carvalho Sep 11 '18 at 14:41

issue on svg to pdf with not rendered

1 Answers1