Html SVG 周围的文字

发布于05月10日

我绝对是SVG的初学者，我需要把文字放在这个月亮周围...

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

推荐答案

用路径画月亮.(编辑:https://yqnn.github.io/svg-path-editor/)

路径是逆时针绘制的，如果希望像设计一样绘制innermoon文本，则更容易添加顺时针绘制的第二条路径.

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>