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

Question

我希望在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，反应0.14.2和反应dom ^ 0.14.2。

Answer 1

对于现在阅读本文的人，ReactJS自版本15起就具有完整的SVG支持。因此， <textPath>元素现在应该可以正常工作。

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

Answer 2

textPath目前不支持，所以你不得不求助于使用dangerouslySetInnerHTML 。

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

演示版

Answer 3

因此问题出在没有完整的svg支持上，对此仍在努力。

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

我还没有反应，但这就是我可以收集的。 希望能帮助到你。