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页面确实显示了“进来吧…”的文字，但它不是弯曲的。看起来React在解释<textPath>时有些困难。

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

我正在使用ES6、react 0.14.2以及react-dom ^0.14.2。

- Fernando

Answer 1

现在阅读此文的人们应该知道，ReactJS版本15已经具备完整的SVG支持。因此，<textPath>元素现在应该按预期工作。

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

- Jeger

Answer 2

textPath 目前不支持，所以你需要使用 dangerouslySetInnerHTML。

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

演示

- Henrik Andersson

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Fernando

是的，如果您在textPath变量中使用用户输入，那么这是一个巨大的安全风险。除此之外，如果这是您唯一要做的事情，并且您已经对其进行了净化和检查，则应该没问题。http://facebook.github.io/react/tips/dangerously-set-inner-html.html - Henrik Andersson

Answer 3

所以问题在于React没有完整的SVG支持，这仍然是一个正在努力解决的问题。也许这样会有所帮助：https://github.com/facebook/react/issues/1657#issuecomment-70786561。我没有使用过React，但这就是我能够了解到的。希望能有所帮助。

- zshnr

---

谢谢，Zee。那可能行得通，但我仍然有点担心 XSS。我可能需要走 jQuery 这条路…… - Fernando