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 in in ...”文字，但不是弯曲的。似乎React正在努力解释<textPath>。

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

我正在使用ES6，反应0.14.2并且反应-dom ^ 0.14.2。

Answer 1

textPath目前不受支持，因此您不得不使用dangerouslySetInnerHTML。

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

Demo

Answer 2

所以问题是没有完全的svg支持，这仍然是有效的。

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

我没有做过反应但这就是我能收集到的东西。希望它有所帮助。

React中的弯曲文本（SVG textPath无效）

2 个答案: