为什么使用React渲染时，在Firefox中SVG textPath无法工作

Question

我正在尝试渲染一个包含沿路径文本的内联SVG元素的React组件。这是从渲染方法返回的内容：

        <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呢？已尝试使用_dangerouslySetInnerHTML来处理textPath，但也没有奏效。使用的是React 15.3.1，并在FF 52.0.2（32位）中检查。

- DaanH

---

红色描边路径是否显示？ - Kaiido

不，红色路径也没有显示出来，所以看起来似乎是定义没有被处理或找到。 - DaanH

我更倾向于怀疑 xlink 命名空间存在错误。 - Kaiido

那么我该如何检查、调试或修复它呢？ - DaanH

还是卡在这里了... - DaanH

这个与此评论相关的fiddle对我来说是有效的。阅读该问题以获取更多信息。 - Kaiido

Answer 1

检查您的元素中是否有<base href="...">标签。

如果是这样，在Chrome中可以显示您的文本，但Firefox则无法显示。

Firefox正在搜索位于base href url上的xlink:href属性，但未找到它，因此文本被忽略。

解决方法是使用绝对url：

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

如果您使用JavaScript生成SVG，则更容易：

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

在使用mask和filter属性时，可能会出现类似的奇怪行为。

- Etienne Coumont