React中的弯曲文本(SVG textPath不起作用）

Curved Text in React (SVG textPath not working)

本文关键字：SVG textPath 不起作用 文本 弯曲 React      更新时间：2023-09-26

我希望在React页面的顶部有一个弧形标题。我希望远离JQuery，所以我使用SVG。

这是我写的代码，它在react之外工作：

<svg width='100%'>
    <defs>
        <path id="bigArc" d="m0,170 a800,800 0 0 1 800,0"/>
    </defs>
    <text x="200" fill='#003399' style="font-size: 80px;">
        <textPath xlink:href="#bigArc" >
            Come on in...
        </textPath>
    </text>
</svg>

这是我在React return（）中的非工作代码：

<svg width='500px'>
    <defs>
        <path id='bigArc' d='m0,170 a800,800 0 0 1 800,0'/>
    </defs>
    <text x='200' fill='#003399' style={{ fontSize: 80 }} >
        <textPath xlinkHref='#bigArc' >
            Come on in...
        </textPath>
    </text>
</svg>

目前，我的React页面确实显示了"Come on in…"文本，但它是而不是弯曲的。React似乎在努力解读<textPath>。

我没有得到任何控制台错误，我的代码确实构建了，但文本没有遵循弧形路径。

我使用的是ES6，react 0.14.2和react dom^0.14.2。

对于现在阅读本文的人来说，ReactJS从版本15起就完全支持SVG。因此<textPath>元素现在应该可以按预期工作了。

有关详细信息，请阅读React v15.0发布说明。

textPath当前不受支持，因此您必须使用dangerouslySetInnerHTML。

let textPath = `<textPath xlink:href="#bigArc">Come on in...</textPath>`;
<text dangerouslySetInnerHTML={{__html: textPath }}></text>;

演示

所以问题是react没有完全的svg支持，这是仍在进行的工作

也许这样的事情会有所帮助：https://github.com/facebook/react/issues/1657#issuecomment-70786561

我没有和react合作过，但这是我能收集到的。希望能有所帮助。

相关文章：