在我的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
?非常感谢任何其他解决方案!
1条答案
按热度按时间ylamdve61#
要显示SVG路径中的文本,可以使用SVG
tspan
元素代替foreignObject
.smth,如下所示:用于微调的
tspan
的属性在here中描述。