未呈现 <rect> 的 svg 到 pdf 问题答案

【问题标题】：issue on svg to pdf with <rect> not rendered未呈现 <rect> 的 svg 到 pdf 问题
【发布时间】：2018-09-11 14:13:59
【问题描述】：

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

我正在使用 TCPDF 方法：

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

但是，红色矩形 (rect fill="rgb(255, 0, 0)" x="0" y="0" width="100%" height="100%") 不显示在生成的pdf中

【问题讨论】：

标签： tcpdf

【解决方案1】：

问题似乎出在宽度和高度上。设置 width="846" 和 height="630" 一切正常。问题是fabric.js生成了错误的部分

【讨论】：

我要更正我的说法：fabric.js 生成的 svg 输出格式正确，根据 svg 规范，宽度属性可以是百分比。因此，问题似乎在于未能读取百分比的 TCPDF