How to create a slanted SVG image with slanted text

I am trying to create a slanted image in svg with slanted text as shown in the image below

I tried to create the same format but couldn't create the same design as the overall text display, you can also see the columns below attached horizontally down.

Please find my code below

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

Please find below the image created with this svg, the red part is there I want grey too, I'm short and I want the exact image as shown above.

I need to do this in PDFMake , copy the code below and paste it on the left part of the screen in the PDFMake site, I need to show the exact layout in the first image

var dd = {
    content: [

        {
            style: 'tableExample',
            table: {
                body: [
                    ['OverAll', 'Operational', 'Solvency'],
                    ['1', '1', '1']
                ]
            }
        }
    ]
}