为什么文本没有出现在我的元素中<path>？

Question

我想在使用SVG<path>元素绘制的自定义形状中显示一些文本。我已经尝试使用许多元素<h1>'s,<p>'s和其他一些，但什么也没有出现。

这是我的React组件代码:

export default function Segment({ pathData, keyName }) {
return (
<path d={pathData} stroke='red' fillOpacity={0.1} fill="green">
<p style={{backgroundColor: 'purple'}}>I want to put some text here, like the {keyName}</p>
</path>
)
}

就像我说的，我已经尝试了一堆不同的元素，我试着改变颜色和背景色，这样元素和文本就会突出，这样我就可以很容易地找到它们，但我仍然什么也看不见。

Answer 1

在SVG中，<text>是一个单独的对象。不要在里面放文本其他形状，在它们前面加上． 没有文本填充形状(框)的概念，不像在HTML中那样。

.d1 {
background: pink;
display: flex;
}
.d1 svg {
background: lime;
width: 140px;
transform: rotate(-15deg);
}

<div class="d1">
<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="100" height="100" style="stroke: rgb(38, 0, 255); stroke-width: 2px; fill: rgb(251, 255, 0);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 13.9px;" x="36.787" y="66.866">This text is</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 13.9px;" x="27.113" y="82.798">inside the box</text>
</svg>
</div>