如何使用倾斜文本创建倾斜的 SVG 图像
How to create slanting SVG Image with slanting text
我正在尝试使用倾斜文本在 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']
]
}
}
]
}
您可以尝试倾斜矩形。如果将文本和矩形旋转 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 中创建倾斜图像,如下图所示
我尝试创建相同的格式,但无法创建与整体文本显示完全相同的设计,您还可以看到水平向下附有下面的列。
请找到我下面的代码
<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']
]
}
}
]
}
您可以尝试倾斜矩形。如果将文本和矩形旋转 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>