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

时间:2014-07-16 22:54:30

标签: text svg d3.js

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

只是为了补充 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>