Adding space seperating the text from the svg

Applying padding, margin or adding white space separating the text from the svg.

How would I be able to do this?

I read this: But I don’t understand what it is saying to do.

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

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath


<svg width="260" height="250" viewBox="0 0 260 250">
  <text >
    <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>

See the examples here at MDN

Now slip that dy attribute in your <text>

  <text dy="-10">
    <textPath xlink:href="#curve" side="right">
      Example Text
    </textPath>
  </text>

It looks like you may need to adjust your svg and viewBox size.

dy

2 Likes

I would have tried adding the text around an invisible circle which encloses your circle.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.