如何使用倾斜文本创建倾斜的 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，因为通过倾斜和旋转它的矩形部分被移到了 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>

如何使用倾斜文本创建倾斜的 SVG 图像

How to create slanting SVG Image with slanting text

pdf

svg

svg-filters

svg-animate

pdfmake