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>

这显示“我们上升，然后我们下降，然后再上升”文本，但只是从0,0开始的直线水平线。

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

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

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

Answer 1

检查元素中是否有标记。

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

Firefox在基本href网址中搜索您的xlink：href属性，但找不到它，因此文本将被忽略。

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

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

使用javascript生成svg会更容易：

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

掩码和过滤器属性也会发生类似的怪异行为。

为什么SVG textPath在React

1 个答案: