为什么在 React 渲染时 SVG textPath 在 Firefox 中不起作用答案

【问题标题】：Why is SVG textPath not working in Firefox when rendered by React为什么在 React 渲染时 SVG textPath 在 Firefox 中不起作用
【发布时间】：2017-09-22 12:52:26
【问题描述】：

我正在尝试使用沿路径具有文本的内联 SVG 元素呈现反应组件。这是从 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>

这显示了“We go up, then we go down, then up again”文本，但只是从 0,0 开始的一条水平直线。

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

使用 React 15.3.1 并签入 FF 52.0.2(32bit)

已经尝试将 _dangerouslySetInnerHTML 用于 textPath，但这也没有用。

【问题讨论】：

是否显示红色描边路径？
不，红色路径也没有显示，所以看起来好像没有处理或找到defs。
我宁愿怀疑 xlink 命名空间的错误。
那么我该如何检查、调试或修复它？
还是卡在这里...

标签： javascript reactjs firefox svg

【解决方案1】：

检查您的

元素中是否有标记。

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

Firefox 正在基础 href url 中搜索您的 xlink:href 属性，它没有找到它，所以文本被忽略了。

一种解决方法是使用绝对网址：

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

如果你用 javascript 生成 svg 会更容易：

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

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

【讨论】：