reactjs SVG文本路径中的HTML?

dwbf0jvd  于 2023-03-08  发布在  React
关注(0)|答案(1)|浏览(135)

在我的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?非常感谢任何其他解决方案!

ylamdve6

ylamdve61#

要显示SVG路径中的文本,可以使用SVG tspan元素代替foreignObject.smth,如下所示:

<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>
    <textPath id="text" className="textPath" href="#circle">
      <tspan x="0" dy="1em">Made with</tspan>
      <tspan x="0" dy="1em">❤️ since 2023</tspan>
    </textPath>
  </text>
</svg>

用于微调的tspan的属性在here中描述。

相关问题