Text around the SVG

user_17653962 0
Viewed 35

I'm absolutely beginner with SVG, and I need to put text around this moon... I tried to make text around a path and could not get the right sizes and match it with the moon.

<svg viewBox="-6 -6 30 40">
    <defs>
        <mask id="earth">
            <rect fill="white" x="-5" y="-5" width="10" height="10"></rect>
            <circle fill="black" cx="3.141592654" r="5" />
        </mask>
    </defs>
    <circle r="5" fill="currentColor" mask="url(#earth)" transform="rotate(-25)"/>
</svg>

svg html
1 Answers

Draw the moon with a path. (and edit in: https://yqnn.github.io/svg-path-editor/)

The path is drawn counter-clockwise, if you want to draw the innermoon text like your design, it is easier to add a 2nd path drawn clockwise.

Setting pathLength helps in positioning with startoffset
Look up all attributes you don't know in the docs.

<svg viewBox="0 0 80 60">
  <rect width="100%" height="100%" fill="skyblue"/>
  <path id="Moon" pathLength="10" d="m16 2a12 12 0 1018 13 1 1 0 01-18-13z"/>
  <text>
    <textPath href="#Moon" 
              startoffset="1" text-anchor="left" dominant-baseline="hanging"
              fill="blue" font-size="3px">Outside moon</textPath>
  </text>
  <text>
    <textPath href="#Moon" 
              startoffset="6" text-anchor="right" dominant-baseline="hanging"
              fill="rebeccapurple" font-size="4">Inside moon</textPath>
  </text>
</svg>

user_25208000
Related