在我的React应用程序中，我尝试获取一些文本，其中包含html跨度（如下所示：“Made with since️2023”以SVG文本路径显示（其本身遵循圆形路径）。
我试过用foreignObject Package 这个html，如下所示：

<svg className="svg" viewBox="0 0 100 100">
 <path
  id="circle"
  d="M 50,50 m -40,0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0"
  fill="transparent"
   />
  <text width="100px" height="100px">
  <textPath id="text" className="textPath" href="#circle">
   <foreignObject
    x="0"
    y="0"
    width="100"
    height="100"
    id="text"
    className="textPath"
    href="#circle"
    xmlns="http://www.w3.org/1999/xhtml"
    dangerouslySetInnerHTML={{
     __html: `<p>Made with <span role="img" aria-label="love">❤️</span> since 2023</p>`,
     }}
    />
   </textPath>
  </text>
</svg>

而且，虽然我可以看到html字符串在DOM中呈现得很好。但它无处可见，因为似乎<text>和<textPath>都没有宽度或高度。我错过了什么，还是根本不可能在textPath中使用foreignObject？非常感谢任何其他解决方案！