javascript - 为什么 SVG textPath 在由 React 渲染时在 Firefox 中不起作用

我正在尝试使用沿路径具有文本的内联 SVG 元素呈现 react 组件。这是从 render 方法返回的内容:

        <div className="textsvg">
            <svg width="100%" height="100%" viewBox="-50 -50 100 100">
                <defs>
                    <path id="textPathTop" d={`
                            M 0 40
                            A 40,40 0 0 1 0,-40
                            A 40,40 0 0 1 0,40`}></path>
                    <path id="textPathBottom" d={`
                            M 0 -41.8
                            A 41.8,41.8 0 0 0 0,41.8
                            A 41.8,41.8 0 0 0 0,-41.8`}></path>
                </defs>
                <use xlinkHref="#textPathBottom" fill="none" stroke="red"></use>
                <text fill="red" fontSize="4.5"><textPath xlinkHref="#textPathBottom">We go up, then we go down, then up again</textPath></text>
                </svg>
        </div>

这显示了“我们上升，然后我们下降，然后再次上升”文本，但只是从 0,0 开始的水平直线。

使用 textPath 将生成的 html 复制到 codepen 中会显示结果。
为什么使用 ReactJS 渲染时 textPath 被忽略？

使用 React 15.3.1 并 checkin FF 52.0.2(32bit)

已经尝试将 _dangerouslySetInnerHTML 用于 textPath，但这也不起作用。

最佳答案

检查您的 元素中是否有 标签。

如果是这样，Firefox 将无法显示您的文本，而 Chrome 可以。

Firefox 正在基本 href url 中搜索您的 xlink:href 属性，但没有找到，因此该文本将被忽略。

解决方法是使用绝对网址:

<textPath xlink:href="http://pathtoyourpage#textPathBottom">

如果您使用 javascript 生成 svg 会更容易:

textPath.setAttribute('xlink:href', `${location.href}#textPathBottom`)

掩码和过滤器属性会发生一些类似的奇怪行为。

关于javascript - 为什么 SVG textPath 在由 React 渲染时在 Firefox 中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43611831/