react-native-svg：SVG 图标内的自定义文本
react-native-svg: Custom text inside the SVG icon
我是 react-native
的新手
我正在尝试 react-native-svg to create a SVG icon, In that SVG icon I want add a Text on top of the icon like this Image。
我尝试了很多方法都无法成功。
这是我的 SVG 文件
import Svg, { Circle, G, Line, Path, Polyline, Rect, Text } from 'react-native-svg';
const ServiceRequestIcon = ({ width, height, color, style, strokeWidth = `1.5` }: IIcon) => {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={width || 40}
height={height || 40}
viewBox="0 0 50 50"
style={style}
strokeWidth={strokeWidth * 15 || `15`}
fill={color || `green`}
>
<Text x="120" fontSize="500" fontWeight="bold"
y="20" textAnchor="middle">
New
</Text>
<Path d="M 9 3 C 6.25455 3 4 5.25455 4 8 L 4 34 C 4 36.7455 6.25455 39 9 39 L 12.918 39 C 12.9 40.1216 12.9074 41.2611 12.6582 42.1914 C 12.3309 43.4132 11.7621 44.3771 10.4863 45.1426 A 1.0001 1.0001 0 0 0 11 47 C 15.237 47 19.4156 44.7212 21.6133 39 L 41 39 C 43.7455 39 46 36.7455 46 34 L 46 8 C 46 5.25455 43.7455 3 41 3 L 9 3 Z M 9 5 L 41 5 C 42.6545 5 44 6.34545 44 8 L 44 34 C 44 35.6545 42.6545 37 41 37 L 21 37 A 1.0001 1.0001 0 0 0 20.0508 37.6836 C 18.6187 41.9799 16.3421 43.9518 13.6895 44.6641 C 14.0805 44.0385 14.4103 43.3864 14.5918 42.709 C 15.0145 41.1308 15 39.5 15 38 A 1.0001 1.0001 0 0 0 14 37 L 9 37 C 7.34545 37 6 35.6545 6 34 L 6 8 C 6 6.34545 7.34545 5 9 5 Z M 14.4297 9 L 13 10.4297 L 15.1426 14 L 16.5859 14 L 21.1113 18.5254 L 22.5254 17.1113 L 18 12.5859 L 18 11.1426 L 14.4297 9 Z M 31 9 C 27.686 9 25 11.686 25 15 C 25 15.734 25.1389 16.4359 25.3809 17.0859 L 13.7324 28.7324 C 13.6164 28.8484 13.5129 28.9763 13.4219 29.1133 C 13.3809 29.1753 13.3514 29.2416 13.3164 29.3066 C 13.2734 29.3846 13.2264 29.46 13.1914 29.543 C 13.1574 29.626 13.1363 29.7119 13.1113 29.7969 C 13.0903 29.8679 13.0628 29.9358 13.0488 30.0098 C 12.9848 30.3328 12.9848 30.6653 13.0488 30.9883 C 13.0638 31.0613 13.0903 31.1302 13.1113 31.2012 C 13.1363 31.2862 13.1574 31.3731 13.1914 31.4551 C 13.2254 31.5381 13.2715 31.6115 13.3145 31.6895 C 13.3495 31.7545 13.3799 31.8218 13.4219 31.8848 C 13.6049 32.1588 13.8393 32.3951 14.1133 32.5781 C 14.1753 32.6191 14.2436 32.6486 14.3086 32.6836 C 14.3866 32.7266 14.4619 32.7736 14.5449 32.8086 C 14.6279 32.8426 14.7138 32.8617 14.7988 32.8867 C 14.8698 32.9077 14.9377 32.9352 15.0117 32.9492 C 15.3347 33.0132 15.6672 33.0132 15.9902 32.9492 C 16.0642 32.9342 16.1321 32.9077 16.2031 32.8867 C 16.2881 32.8617 16.374 32.8426 16.457 32.8086 C 16.54 32.7746 16.6154 32.7266 16.6934 32.6836 C 16.7584 32.6486 16.8247 32.6191 16.8867 32.5781 C 17.0237 32.4861 17.1516 32.3836 17.2676 32.2676 L 28.9141 20.6191 C 29.5641 20.8611 30.266 21 31 21 C 34.314 21 37 18.314 37 15 C 37 14.074 36.7842 13.201 36.4102 12.418 L 31.9141 16.9141 L 29.0859 14.0859 L 33.582 9.58984 C 32.799 9.21584 31.926 9 31 9 Z M 29.9492 22.4141 L 26.4141 25.9512 L 32.7324 32.2695 C 32.8484 32.3855 32.9763 32.4891 33.1133 32.5801 C 33.1753 32.6211 33.2416 32.6505 33.3066 32.6855 C 33.3846 32.7285 33.46 32.7755 33.543 32.8105 C 33.626 32.8445 33.7119 32.8637 33.7969 32.8887 C 33.8679 32.9097 33.9358 32.9372 34.0098 32.9512 C 34.3328 33.0152 34.6653 33.0152 34.9883 32.9512 C 35.0623 32.9362 35.1302 32.9097 35.2012 32.8887 C 35.2862 32.8637 35.3721 32.8445 35.4551 32.8105 C 35.5381 32.7765 35.6134 32.7285 35.6914 32.6855 C 35.7564 32.6505 35.8247 32.6211 35.8867 32.5801 C 36.1607 32.3971 36.3951 32.1607 36.5781 31.8867 C 36.6201 31.8247 36.6495 31.7564 36.6855 31.6914 C 36.7275 31.6134 36.7736 31.5381 36.8086 31.4551 C 36.8426 31.3721 36.8637 31.2862 36.8887 31.2012 C 36.9097 31.1302 36.9362 31.0632 36.9512 30.9902 C 37.0152 30.6672 37.0152 30.3347 36.9512 30.0117 C 36.9362 29.9377 36.9097 29.8698 36.8887 29.7988 C 36.8637 29.7138 36.8426 29.6279 36.8086 29.5449 C 36.7746 29.4619 36.7266 29.3866 36.6836 29.3086 C 36.6486 29.2436 36.6191 29.1753 36.5781 29.1133 C 36.4861 28.9763 36.3836 28.8484 36.2676 28.7324 L 29.9492 22.4141 Z" />
</Svg>
);
};
哪种方法更好...！？
我假设您只想要图标（路径）中间的文本，而不需要示例图像中文本的旋转。
在这种情况下，您可以这样做：
import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import Svg, {
Circle,
G,
Line,
Path,
Polyline,
Rect,
Text,
} from 'react-native-svg';
const ServiceRequestIcon = ({
width,
height,
color,
style = {},
strokeWidth = `1.5`,
}: IIcon) => {
const w = width || 40;
const h = height || 40;
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={w}
height={h}
viewBox="0 0 50 50"
style={style}
strokeWidth={strokeWidth * 15 || `15`}
fill={color || `green`}>
<Path d="M 9 3 C 6.25455 3 4 5.25455 4 8 L 4 34 C 4 36.7455 6.25455 39 9 39 L 12.918 39 C 12.9 40.1216 12.9074 41.2611 12.6582 42.1914 C 12.3309 43.4132 11.7621 44.3771 10.4863 45.1426 A 1.0001 1.0001 0 0 0 11 47 C 15.237 47 19.4156 44.7212 21.6133 39 L 41 39 C 43.7455 39 46 36.7455 46 34 L 46 8 C 46 5.25455 43.7455 3 41 3 L 9 3 Z M 9 5 L 41 5 C 42.6545 5 44 6.34545 44 8 L 44 34 C 44 35.6545 42.6545 37 41 37 L 21 37 A 1.0001 1.0001 0 0 0 20.0508 37.6836 C 18.6187 41.9799 16.3421 43.9518 13.6895 44.6641 C 14.0805 44.0385 14.4103 43.3864 14.5918 42.709 C 15.0145 41.1308 15 39.5 15 38 A 1.0001 1.0001 0 0 0 14 37 L 9 37 C 7.34545 37 6 35.6545 6 34 L 6 8 C 6 6.34545 7.34545 5 9 5 Z M 14.4297 9 L 13 10.4297 L 15.1426 14 L 16.5859 14 L 21.1113 18.5254 L 22.5254 17.1113 L 18 12.5859 L 18 11.1426 L 14.4297 9 Z M 31 9 C 27.686 9 25 11.686 25 15 C 25 15.734 25.1389 16.4359 25.3809 17.0859 L 13.7324 28.7324 C 13.6164 28.8484 13.5129 28.9763 13.4219 29.1133 C 13.3809 29.1753 13.3514 29.2416 13.3164 29.3066 C 13.2734 29.3846 13.2264 29.46 13.1914 29.543 C 13.1574 29.626 13.1363 29.7119 13.1113 29.7969 C 13.0903 29.8679 13.0628 29.9358 13.0488 30.0098 C 12.9848 30.3328 12.9848 30.6653 13.0488 30.9883 C 13.0638 31.0613 13.0903 31.1302 13.1113 31.2012 C 13.1363 31.2862 13.1574 31.3731 13.1914 31.4551 C 13.2254 31.5381 13.2715 31.6115 13.3145 31.6895 C 13.3495 31.7545 13.3799 31.8218 13.4219 31.8848 C 13.6049 32.1588 13.8393 32.3951 14.1133 32.5781 C 14.1753 32.6191 14.2436 32.6486 14.3086 32.6836 C 14.3866 32.7266 14.4619 32.7736 14.5449 32.8086 C 14.6279 32.8426 14.7138 32.8617 14.7988 32.8867 C 14.8698 32.9077 14.9377 32.9352 15.0117 32.9492 C 15.3347 33.0132 15.6672 33.0132 15.9902 32.9492 C 16.0642 32.9342 16.1321 32.9077 16.2031 32.8867 C 16.2881 32.8617 16.374 32.8426 16.457 32.8086 C 16.54 32.7746 16.6154 32.7266 16.6934 32.6836 C 16.7584 32.6486 16.8247 32.6191 16.8867 32.5781 C 17.0237 32.4861 17.1516 32.3836 17.2676 32.2676 L 28.9141 20.6191 C 29.5641 20.8611 30.266 21 31 21 C 34.314 21 37 18.314 37 15 C 37 14.074 36.7842 13.201 36.4102 12.418 L 31.9141 16.9141 L 29.0859 14.0859 L 33.582 9.58984 C 32.799 9.21584 31.926 9 31 9 Z M 29.9492 22.4141 L 26.4141 25.9512 L 32.7324 32.2695 C 32.8484 32.3855 32.9763 32.4891 33.1133 32.5801 C 33.1753 32.6211 33.2416 32.6505 33.3066 32.6855 C 33.3846 32.7285 33.46 32.7755 33.543 32.8105 C 33.626 32.8445 33.7119 32.8637 33.7969 32.8887 C 33.8679 32.9097 33.9358 32.9372 34.0098 32.9512 C 34.3328 33.0152 34.6653 33.0152 34.9883 32.9512 C 35.0623 32.9362 35.1302 32.9097 35.2012 32.8887 C 35.2862 32.8637 35.3721 32.8445 35.4551 32.8105 C 35.5381 32.7765 35.6134 32.7285 35.6914 32.6855 C 35.7564 32.6505 35.8247 32.6211 35.8867 32.5801 C 36.1607 32.3971 36.3951 32.1607 36.5781 31.8867 C 36.6201 31.8247 36.6495 31.7564 36.6855 31.6914 C 36.7275 31.6134 36.7736 31.5381 36.8086 31.4551 C 36.8426 31.3721 36.8637 31.2862 36.8887 31.2012 C 36.9097 31.1302 36.9362 31.0632 36.9512 30.9902 C 37.0152 30.6672 37.0152 30.3347 36.9512 30.0117 C 36.9362 29.9377 36.9097 29.8698 36.8887 29.7988 C 36.8637 29.7138 36.8426 29.6279 36.8086 29.5449 C 36.7746 29.4619 36.7266 29.3866 36.6836 29.3086 C 36.6486 29.2436 36.6191 29.1753 36.5781 29.1133 C 36.4861 28.9763 36.3836 28.8484 36.2676 28.7324 L 29.9492 22.4141 Z" />
<Text x="12.5" y="25" text-anchor="middle" fontWeight="bold" fill="black">
New
</Text>
</Svg>
);
};
const App = () => {
return (
<View style={{padding: 50}}>
<ServiceRequestIcon width={200} height={200} />
</View>
);
};
export default App;
在您的原始问题中，您选择了一个大 x 和一个非常大的 fontSize，这导致文本被截断。
我是 react-native
的新手我正在尝试 react-native-svg to create a SVG icon, In that SVG icon I want add a Text on top of the icon like this Image。
我尝试了很多方法都无法成功。
这是我的 SVG 文件
import Svg, { Circle, G, Line, Path, Polyline, Rect, Text } from 'react-native-svg';
const ServiceRequestIcon = ({ width, height, color, style, strokeWidth = `1.5` }: IIcon) => {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={width || 40}
height={height || 40}
viewBox="0 0 50 50"
style={style}
strokeWidth={strokeWidth * 15 || `15`}
fill={color || `green`}
>
<Text x="120" fontSize="500" fontWeight="bold"
y="20" textAnchor="middle">
New
</Text>
<Path d="M 9 3 C 6.25455 3 4 5.25455 4 8 L 4 34 C 4 36.7455 6.25455 39 9 39 L 12.918 39 C 12.9 40.1216 12.9074 41.2611 12.6582 42.1914 C 12.3309 43.4132 11.7621 44.3771 10.4863 45.1426 A 1.0001 1.0001 0 0 0 11 47 C 15.237 47 19.4156 44.7212 21.6133 39 L 41 39 C 43.7455 39 46 36.7455 46 34 L 46 8 C 46 5.25455 43.7455 3 41 3 L 9 3 Z M 9 5 L 41 5 C 42.6545 5 44 6.34545 44 8 L 44 34 C 44 35.6545 42.6545 37 41 37 L 21 37 A 1.0001 1.0001 0 0 0 20.0508 37.6836 C 18.6187 41.9799 16.3421 43.9518 13.6895 44.6641 C 14.0805 44.0385 14.4103 43.3864 14.5918 42.709 C 15.0145 41.1308 15 39.5 15 38 A 1.0001 1.0001 0 0 0 14 37 L 9 37 C 7.34545 37 6 35.6545 6 34 L 6 8 C 6 6.34545 7.34545 5 9 5 Z M 14.4297 9 L 13 10.4297 L 15.1426 14 L 16.5859 14 L 21.1113 18.5254 L 22.5254 17.1113 L 18 12.5859 L 18 11.1426 L 14.4297 9 Z M 31 9 C 27.686 9 25 11.686 25 15 C 25 15.734 25.1389 16.4359 25.3809 17.0859 L 13.7324 28.7324 C 13.6164 28.8484 13.5129 28.9763 13.4219 29.1133 C 13.3809 29.1753 13.3514 29.2416 13.3164 29.3066 C 13.2734 29.3846 13.2264 29.46 13.1914 29.543 C 13.1574 29.626 13.1363 29.7119 13.1113 29.7969 C 13.0903 29.8679 13.0628 29.9358 13.0488 30.0098 C 12.9848 30.3328 12.9848 30.6653 13.0488 30.9883 C 13.0638 31.0613 13.0903 31.1302 13.1113 31.2012 C 13.1363 31.2862 13.1574 31.3731 13.1914 31.4551 C 13.2254 31.5381 13.2715 31.6115 13.3145 31.6895 C 13.3495 31.7545 13.3799 31.8218 13.4219 31.8848 C 13.6049 32.1588 13.8393 32.3951 14.1133 32.5781 C 14.1753 32.6191 14.2436 32.6486 14.3086 32.6836 C 14.3866 32.7266 14.4619 32.7736 14.5449 32.8086 C 14.6279 32.8426 14.7138 32.8617 14.7988 32.8867 C 14.8698 32.9077 14.9377 32.9352 15.0117 32.9492 C 15.3347 33.0132 15.6672 33.0132 15.9902 32.9492 C 16.0642 32.9342 16.1321 32.9077 16.2031 32.8867 C 16.2881 32.8617 16.374 32.8426 16.457 32.8086 C 16.54 32.7746 16.6154 32.7266 16.6934 32.6836 C 16.7584 32.6486 16.8247 32.6191 16.8867 32.5781 C 17.0237 32.4861 17.1516 32.3836 17.2676 32.2676 L 28.9141 20.6191 C 29.5641 20.8611 30.266 21 31 21 C 34.314 21 37 18.314 37 15 C 37 14.074 36.7842 13.201 36.4102 12.418 L 31.9141 16.9141 L 29.0859 14.0859 L 33.582 9.58984 C 32.799 9.21584 31.926 9 31 9 Z M 29.9492 22.4141 L 26.4141 25.9512 L 32.7324 32.2695 C 32.8484 32.3855 32.9763 32.4891 33.1133 32.5801 C 33.1753 32.6211 33.2416 32.6505 33.3066 32.6855 C 33.3846 32.7285 33.46 32.7755 33.543 32.8105 C 33.626 32.8445 33.7119 32.8637 33.7969 32.8887 C 33.8679 32.9097 33.9358 32.9372 34.0098 32.9512 C 34.3328 33.0152 34.6653 33.0152 34.9883 32.9512 C 35.0623 32.9362 35.1302 32.9097 35.2012 32.8887 C 35.2862 32.8637 35.3721 32.8445 35.4551 32.8105 C 35.5381 32.7765 35.6134 32.7285 35.6914 32.6855 C 35.7564 32.6505 35.8247 32.6211 35.8867 32.5801 C 36.1607 32.3971 36.3951 32.1607 36.5781 31.8867 C 36.6201 31.8247 36.6495 31.7564 36.6855 31.6914 C 36.7275 31.6134 36.7736 31.5381 36.8086 31.4551 C 36.8426 31.3721 36.8637 31.2862 36.8887 31.2012 C 36.9097 31.1302 36.9362 31.0632 36.9512 30.9902 C 37.0152 30.6672 37.0152 30.3347 36.9512 30.0117 C 36.9362 29.9377 36.9097 29.8698 36.8887 29.7988 C 36.8637 29.7138 36.8426 29.6279 36.8086 29.5449 C 36.7746 29.4619 36.7266 29.3866 36.6836 29.3086 C 36.6486 29.2436 36.6191 29.1753 36.5781 29.1133 C 36.4861 28.9763 36.3836 28.8484 36.2676 28.7324 L 29.9492 22.4141 Z" />
</Svg>
);
};
哪种方法更好...！？
我假设您只想要图标（路径）中间的文本，而不需要示例图像中文本的旋转。
在这种情况下，您可以这样做：
import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import Svg, {
Circle,
G,
Line,
Path,
Polyline,
Rect,
Text,
} from 'react-native-svg';
const ServiceRequestIcon = ({
width,
height,
color,
style = {},
strokeWidth = `1.5`,
}: IIcon) => {
const w = width || 40;
const h = height || 40;
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={w}
height={h}
viewBox="0 0 50 50"
style={style}
strokeWidth={strokeWidth * 15 || `15`}
fill={color || `green`}>
<Path d="M 9 3 C 6.25455 3 4 5.25455 4 8 L 4 34 C 4 36.7455 6.25455 39 9 39 L 12.918 39 C 12.9 40.1216 12.9074 41.2611 12.6582 42.1914 C 12.3309 43.4132 11.7621 44.3771 10.4863 45.1426 A 1.0001 1.0001 0 0 0 11 47 C 15.237 47 19.4156 44.7212 21.6133 39 L 41 39 C 43.7455 39 46 36.7455 46 34 L 46 8 C 46 5.25455 43.7455 3 41 3 L 9 3 Z M 9 5 L 41 5 C 42.6545 5 44 6.34545 44 8 L 44 34 C 44 35.6545 42.6545 37 41 37 L 21 37 A 1.0001 1.0001 0 0 0 20.0508 37.6836 C 18.6187 41.9799 16.3421 43.9518 13.6895 44.6641 C 14.0805 44.0385 14.4103 43.3864 14.5918 42.709 C 15.0145 41.1308 15 39.5 15 38 A 1.0001 1.0001 0 0 0 14 37 L 9 37 C 7.34545 37 6 35.6545 6 34 L 6 8 C 6 6.34545 7.34545 5 9 5 Z M 14.4297 9 L 13 10.4297 L 15.1426 14 L 16.5859 14 L 21.1113 18.5254 L 22.5254 17.1113 L 18 12.5859 L 18 11.1426 L 14.4297 9 Z M 31 9 C 27.686 9 25 11.686 25 15 C 25 15.734 25.1389 16.4359 25.3809 17.0859 L 13.7324 28.7324 C 13.6164 28.8484 13.5129 28.9763 13.4219 29.1133 C 13.3809 29.1753 13.3514 29.2416 13.3164 29.3066 C 13.2734 29.3846 13.2264 29.46 13.1914 29.543 C 13.1574 29.626 13.1363 29.7119 13.1113 29.7969 C 13.0903 29.8679 13.0628 29.9358 13.0488 30.0098 C 12.9848 30.3328 12.9848 30.6653 13.0488 30.9883 C 13.0638 31.0613 13.0903 31.1302 13.1113 31.2012 C 13.1363 31.2862 13.1574 31.3731 13.1914 31.4551 C 13.2254 31.5381 13.2715 31.6115 13.3145 31.6895 C 13.3495 31.7545 13.3799 31.8218 13.4219 31.8848 C 13.6049 32.1588 13.8393 32.3951 14.1133 32.5781 C 14.1753 32.6191 14.2436 32.6486 14.3086 32.6836 C 14.3866 32.7266 14.4619 32.7736 14.5449 32.8086 C 14.6279 32.8426 14.7138 32.8617 14.7988 32.8867 C 14.8698 32.9077 14.9377 32.9352 15.0117 32.9492 C 15.3347 33.0132 15.6672 33.0132 15.9902 32.9492 C 16.0642 32.9342 16.1321 32.9077 16.2031 32.8867 C 16.2881 32.8617 16.374 32.8426 16.457 32.8086 C 16.54 32.7746 16.6154 32.7266 16.6934 32.6836 C 16.7584 32.6486 16.8247 32.6191 16.8867 32.5781 C 17.0237 32.4861 17.1516 32.3836 17.2676 32.2676 L 28.9141 20.6191 C 29.5641 20.8611 30.266 21 31 21 C 34.314 21 37 18.314 37 15 C 37 14.074 36.7842 13.201 36.4102 12.418 L 31.9141 16.9141 L 29.0859 14.0859 L 33.582 9.58984 C 32.799 9.21584 31.926 9 31 9 Z M 29.9492 22.4141 L 26.4141 25.9512 L 32.7324 32.2695 C 32.8484 32.3855 32.9763 32.4891 33.1133 32.5801 C 33.1753 32.6211 33.2416 32.6505 33.3066 32.6855 C 33.3846 32.7285 33.46 32.7755 33.543 32.8105 C 33.626 32.8445 33.7119 32.8637 33.7969 32.8887 C 33.8679 32.9097 33.9358 32.9372 34.0098 32.9512 C 34.3328 33.0152 34.6653 33.0152 34.9883 32.9512 C 35.0623 32.9362 35.1302 32.9097 35.2012 32.8887 C 35.2862 32.8637 35.3721 32.8445 35.4551 32.8105 C 35.5381 32.7765 35.6134 32.7285 35.6914 32.6855 C 35.7564 32.6505 35.8247 32.6211 35.8867 32.5801 C 36.1607 32.3971 36.3951 32.1607 36.5781 31.8867 C 36.6201 31.8247 36.6495 31.7564 36.6855 31.6914 C 36.7275 31.6134 36.7736 31.5381 36.8086 31.4551 C 36.8426 31.3721 36.8637 31.2862 36.8887 31.2012 C 36.9097 31.1302 36.9362 31.0632 36.9512 30.9902 C 37.0152 30.6672 37.0152 30.3347 36.9512 30.0117 C 36.9362 29.9377 36.9097 29.8698 36.8887 29.7988 C 36.8637 29.7138 36.8426 29.6279 36.8086 29.5449 C 36.7746 29.4619 36.7266 29.3866 36.6836 29.3086 C 36.6486 29.2436 36.6191 29.1753 36.5781 29.1133 C 36.4861 28.9763 36.3836 28.8484 36.2676 28.7324 L 29.9492 22.4141 Z" />
<Text x="12.5" y="25" text-anchor="middle" fontWeight="bold" fill="black">
New
</Text>
</Svg>
);
};
const App = () => {
return (
<View style={{padding: 50}}>
<ServiceRequestIcon width={200} height={200} />
</View>
);
};
export default App;
在您的原始问题中，您选择了一个大 x 和一个非常大的 fontSize，这导致文本被截断。