0

I'm Trying to draw a text around circle in svg

      <svg viewBox="0 0 100 100">
            <!-- <defs> -->
            <path id="text" fill="blue" d="M0 50 A1 1, 0, 0 1, 100 50 , M0 50 A1 1, 0, 0 0, 100 50" />
            <!-- </defs> -->
            <textPath xlink:href="#text">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam eos aliquam delectus dolore
                deleniti, ea quo nemo voluptatibus
            </textPath>
        </svg>

and there is a circle but the text is not appeared

Nora
  • 77
  • 6
  • 1
    You need to wrap your `` element in a `` element, like [this fiddle](https://jsfiddle.net/2ty7854v/) – Jake Mar 05 '23 at 02:02
  • oh Thank you.. can I also ask how can I make all the text outside the circle not inside? – Nora Mar 05 '23 at 02:24

1 Answers1

1

For the original question, you need to wrap your <textPath> element in a <text> element.

For the follow-up of "how can I make all the text outside the circle, not inside", I had to do some research. There is a side attribute that seems to do almost exactly what you're asking for, but it is only supported (as of now) in Firefox. However, it seems that inherently, the text is always put on the "left" side of the drawn path. Your original path was drawing a half circle from 0,50 to 100,50, then returning to 0,50, then drawing the other half of the circle. In this way, the "left" side of the lines were always on the upper edge of the line. I removed the return to 0,50 and adjusted the second half-circle so that it draws from 100,50 back to 0,50; now the "left" edge of this line is underneath, producing the desired effect.

<svg viewBox="0 0 100 100" width="600" height="600">
  <!-- <defs> -->
  <path id="text" fill="blue" d="M0 50 A1 1, 0 0 1 100 50 A1 1, 0 0 1 0 50" />
  <!-- </defs> -->
  <text>
    <textPath href="#text" side="left">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam eos aliquam delectus dolore
      deleniti, ea quo nemo voluptatibus
    </textPath>
  </text>
</svg>

TL;DR, you need to wrap <textPath> in a <text> element, and need to be careful with the ordering of the path you're drawing.

This post also has some useful info Circle drawing with SVG's arc path

Jake
  • 862
  • 6
  • 10