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

Question

我正在尝试使用内联 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>

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

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

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

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

Answer 1

检查 元素中是否有 标签。

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

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

解决方法是使用绝对 url:

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

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

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

mask 和 filter 属性会发生一些类似的奇怪行为。