Search code examples
pdfsvgsvg-filterssvg-animatepdfmake

How to create slanting SVG Image with slanting text

I am trying yo create the slanting Image in svg with slanting text as shown in below Image

enter image description here

I have tried to create same format but not able to create exact design as display in overall text, you can also see that down horizontal is attached with below column.

Please find my below code

<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 image created with this svg, where the red portion is there I also want grey color over there, Im short i want exact image as shown in upper image.

enter image description here

I need to do this in PDFMake, Copy this below code and paste on left section screen in PDFMake site, I need to display exact layout as display in 1st Image

var dd = {
    content: [

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

  • You may try to skew the rectangle. If you rotate the text and the rectangle 50 degs the skew angle should be -90+50 = -40. Please note that I've added a viewBox to the svg since by skewing and rotating the rect part of it was moved outside the svg elelent.

    Probably the best solution to your problem (Robert Longson's comment) would be drawing a polygon in an svg editor instead of the rect.

    svg{border:1px solid;}
    <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>