Table header as SVG Image

问题

I am creating the PDF and using the PDFmake code to implement the PDF.I am trying to implement the SVG Image on header section and data is shown below.

The header Created as SVG Image code is as below

<svg width="140" height="100" viewBox="-20 0 120 80">
<rect x="10" y="10" width="80" height="30" style="fill:grey;"  transform="rotate(50 20,40) skewX(-40)" /> 
<style> .textColor {  fill: white; } </style> 
<text x="50" y="25" text-anchor="middle" dx="-10" font-size="12" class="textColor" stroke-width="0"  transform="rotate(50 20,40)">overall</text> 
</svg>

I want my pdf to display as below Image

Till now my pdfmake code is as below

var dd = {
    content: [      
        {           
         table: {
                body: [
                        ['column1',{svg:'<svg height="80%" width="170%"><rect x="170" y="5" width="70" height="60" fill="grey" transform="translate(140 105) skewX(60) translate(-140 -105)" />  <text x="50" y="-15" fill="white" transform="rotate(35)">OVERALL</text></svg>'},{svg:'<svg height="80" width="170"><rect x="110" y="5" width="70" height="60" fill="lightblue" transform="translate(140 105) skewX(60) translate(-140 -105)" />  <text x="50" y="-15" fill="red" transform="rotate(35)">OVERALL</text></svg>'}],
                        ['hello',{text:'1' ,alignment: "center"}, '1']
                        ]
                },
           }
      ]
 }

But the I ma not able to develop the exact design as shown in image

来源：https://stackoverflow.com/questions/59465940/table-header-as-svg-image