如何创建带有倾斜文本的倾斜 SVG 图像

Question

我正在尝试使用倾斜文本在 svg 中创建倾斜图像，如下图所示

我尝试创建相同的格式，但无法创建与整体文本显示完全相同的设计，您还可以看到向下水平附加在下面的列中。

请在下面找到我的代码

<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> 

请在下面找到使用此 svg 创建的图像，其中红色部分在那里我还想要灰色，我很短我想要上图所示的精确图像。

我需要在PDFMake 中执行此操作，复制下面的代码并粘贴到 PDFMake 站点的左侧部分屏幕上，我需要在第一张图片中显示精确的布局

var dd = {
    content: [

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

Answer 1

您可以尝试倾斜矩形。如果将文本和矩形旋转 50 度，则倾斜角度应为 -90+50 = -40。请注意，我已经向 svg 添加了一个 viewBox，因为通过倾斜和旋转它的 rect 部分，它被移到了 svg 元素之外。

可能对您的问题（Robert Longson 的评论）的最佳解决方案是在 svg 编辑器中绘制多边形而不是矩形。

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>