Daa*_*anH 3 javascript firefox svg reactjs
我正在尝试使用内联 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 复制到codepen中，使用 textPath 显示应有的结果。为什么使用 ReactJS 渲染时 textPath 会被忽略？
使用React 15.3.1并检查FF 52.0.2(32位)
已经尝试使用 _dangerouslySetInnerHTML 作为 textPath，但这也不起作用。
检查 <head> 元素中是否有 <base href="..."> 标记。
如果是这样，Firefox 将无法显示您的文本，而 Chrome 可以。
Firefox 正在基本 href url 中搜索您的 xlink:href 属性，但没有找到它，因此该文本将被忽略。
解决方法是使用绝对 url ：
<textPath xlink:href="http://pathtoyourpage#textPathBottom">
如果使用 javascript 生成 svg 会更容易：
textPath.setAttribute('xlink:href', `${location.href}#textPathBottom`)
掩码和过滤器属性也会发生一些类似的奇怪行为。