SVG 周围的文本

Question

我完全是 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>

Answer 1

用路径画月亮。（并编辑：https://yqnn.github.io/svg-path-editor/）

路径画好了counter-clockwise，如果你想像你设计的那样画月内的文字，添加第二条顺时针画的路径会更容易。

设置pathLength有助于定位startoffset
在文档中查找您不知道的所有属性。

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

SVG 周围的文本

Text around the SVG

html

svg