SVG textLength在文本之前添加空格

问题描述

我有一个SVG元素，其中的弧形文本围绕一个圆，文本长度设置为使白色带内的文本对齐，如下所示：

...
async mounted () {
  await this.$nextTick()
  this.formData.groupData = []
}
...

它对于较长的文本也可以正常工作。

但是，文本是由用户定义的，并且可能很短。在这种情况下，将在文本之前添加填充，而不是在文本之后添加

。

如何解决此多余的左侧填充？只要文本一致，我可以在文本的两边使用相同的间距，或者在两边都没有空格。

解决方法

这是为了证明您错了。文本之前没有添加空格。但是，您的示例无法正常工作，并且未应用textLength。我正在将textLength用于textPath元素。

if (this.state.devices.length > 0) {
      return (
        <Bar
          data={this.state.devices}
        />
      );
    } else {
      return (
        <div className="sweet-loading">
          <HashLoader css={override} size={150} color={"#42a315"} />
        </div>
      );
    }
  }

padding svg