Svg 跨浏览器文本路径多行文本的水平居中对齐

我想水平居中对齐多行文字

以下方法适用于Firefox 68.0.2

path{stroke:#000；}
文本{fill:#000；}

这是第一行
这是第二个

我相信Chrome在这里做的是正确的——除了缺少的“a”之外：-/

在SVG1.1中，

startOffset

和

x

属性之间的交互没有得到很好的定义，浏览器做了所有不同的事情

但是，在SVG2中，已经尝试全面描述

元素的文本布局算法。你可以在这里找到它：

上面写着：

对于文本锚定：中间，路径上的起始点是路径上的点，表示路径上的点，该点沿路径从路径起点开始的距离为['startOffset'减去'textPath'元素中所有图示符总前进值的一半]

后来，它说：

当内联基准方向为水平时，“text”或“tspan”元素上的任何“x”属性表示沿路径的新绝对偏移，从而为路径上的起始点提供显式的新值

换句话说，您的

x=“0”

属性将覆盖

startOffset

和

文本锚定设置

因此，在您的第二个SVG中，更加简单和明确是一条路。
我相信Chrome在这里做的是正确的——除了缺少的“a”之外：-/

在SVG1.1中，
startOffset
和
x
属性之间的交互没有得到很好的定义，浏览器做了所有不同的事情

但是，在SVG2中，已经尝试全面描述
元素的文本布局算法。你可以在这里找到它：


上面写着：

对于文本锚定：中间，路径上的起始点是路径上的点，表示路径上的点，该点沿路径从路径起点开始的距离为['startOffset'减去'textPath'元素中所有图示符总前进值的一半]

后来，它说：

当内联基准方向为水平时，“text”或“tspan”元素上的任何“x”属性表示沿路径的新绝对偏移，从而为路径上的起始点提供显式的新值

换句话说，您的
x=“0”
属性将覆盖
startOffset
和
文本锚定设置

因此，在第二个SVG中，更加简单和明确是一条出路