CODEWITHSUNDEEP
textsvgd3.js
Aaron Shen
Aaron Shen

Reputation: 8374

How to add some padding between a path and text on it?

I have a path on my chart and also text along this path by textPath. But the text is very stick or close to this path. How can I add some padding between the text and path. So that the text can be slightly moved away from the path. It'll make my chart looks better.

Upvotes: 5

Views: 4809

Answers (2)

Bhaskar Reddy
Bhaskar Reddy

Reputation: 79

Just to add to jshanley's answer.

Below is the code that shows, by adding "dy" attribute we can add space between the path and text.

<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>

Upvotes: 1

jshanley
jshanley

Reputation: 9128

You could use the dx or dy properties of the <text> element to nudge the text position. For instance yourTextElementSelection.attr('dy', -10) would move the text up 10 units.

Upvotes: 9

Related Questions