Javascript 为什么SVG textPath在Firefox中由React呈现时不起作用

我试图用一个内联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开始的一条直线

将生成的html复制到中，使用textPath显示结果的外观。 为什么在使用ReactJS呈现时忽略textPath

使用React 15.3.1并检入FF 52.0.2（32位）

已尝试将_dangerlySetinerHTML用于textPath，但也没有效果。

检查元素中是否有标记

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

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

解决方法是使用绝对url：

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

---

掩码和筛选器属性也会出现类似的奇怪行为。

是否显示红色笔划路径？不，红色路径也没有显示，因此看起来好像没有处理或找到DEF。我宁愿怀疑xlink命名空间存在错误。那么我如何检查、调试或修复该错误？仍然停留在这里。。。

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