Question

我的图表上有一条路径，也是textPath沿着这条路径发短信。但是文本非常坚持或接近这条道路。如何在文本和路径之间添加一些填充。这样文本可以稍微远离路径。它会让我的图表看起来更好。

Answer 1

您可以使用dx元素的dy或<text>属性轻推文本位置。例如，yourTextElementSelection.attr('dy', -10)会将文本移动10个单位。

Answer 2

只是为了补充 jshanley 的答案。

下面是展示的代码，通过添加“dy”属性，我们可以在路径和文本之间添加空格。

<svg width="260" height="250" viewBox="0 0 260 250">
  <text dy="10%">
    <textPath xlink:href="#curve" side="right">
      Example Text
    </textPath>
  </text>
  <path id="curve"
    d="
    M 130, 150
    m -90, 0
    a 90,90 0 1,0 180,0
    a 90,90 0 1,0 -180,0
    "
    />
</svg>

如何在路径和文本之间添加一些填充？

2 个答案: