在SVG中插入文本

1、插入文本并设置对其方式

<svg id="svg" xmlns="http://www.w3.org/2000/svg"
  width="500px" height="500px" viewBox="0 0 500 500">
  <g style="font-size:14pt;">
    <path d="M 100 10 100 100" style="stroke:gray;fill:none;"/>
    <text x="100" y="30" style="text-anchor:start">Start</text>
    <text x="100" y="60" style="text-anchor:middle">Middle</text>
    <text x="100" y="90" style="text-anchor:end">End</text>
  </g>
</svg>

2、文本相关属性的使用

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
  <!-- 使用tspan标签 -->
  <text x="10" y="30" style="font-size:12pt;">
    Switch among
    <tspan style="font-style:italic">italic</tspan>,normal,
    and <tspan style="font-weight:bold">bold</tspan> text.
  </text>
  <!-- 使用dy、dx标签 -->
  <text x="10" y="50" style="font-size:12pt;">
    F<tspan dy="4">a</tspan>
    <tspan dy="8">l</tspan>
    <tspan dy="12">l</tspan>
  </text>
  <!-- 在<tspan>中为dx、dy、rotate设置多个值 -->
  <text x="10" y="100" style="font-size:12pt;">
    It's
    <tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8" rotate="5 10 -5 -20 0 15">shaken</tspan>
    ,not stirred.
  </text>
  <!-- baseline-shift的使用 -->
  <text x="10" y="150" style="font-size:12pt;">
    C<tspan style="baseline-shift:sub;font-size:8pt;">12</tspan>
    H<tspan style="baseline-shift:sub;font-size:8pt;">22</tspan>
    O<tspan style="baseline-shift:sub;font-size:8pt;">11</tspan>
    (sugar)
  </text>
  <text x="10" y="200" style="font-size:12pt;">
    6.02 * 10<tspan baseline-shift="super" style="font-size:8pt;">23</tspan>
    (Avogadro's number)
  </text>
</svg>

3、设置文本长度

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
  <g style="font-size:14pt;">
    <path d="M 20 10 20 70 M 220 10 220 70" style="stroke:gray;"/>
    <!-- spacing只调整字符间距，spacingAndGlyphs同时调整字符间距和字符本身的大小 -->
    <text x="20" y="30" textLength="200" lengthAdjust="spacing">Two words</text>
    <text x="20" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text>
    <text x="20" y="90">
      Two words
      <tspan style="font-size:10pt;">(normal length)</tspan>
    </text>

    <path d="M 20 100 20 170 M 100 100 100 170" style="stroke:gray;"/>
    <text x="20" y="120" textLength="80" lengthAdjust="spacing">Two words</text>
    <text x="20" y="160" textLength="80" lengthAdjust="spacingAndGlyphs">Two words</text>
  </g>
</svg>

4、纵向文本

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
  <text x="10" y="20" transform="rotate(90,10,20)">rotated90</text>
  <text x="50" y="20" style="writing-mode:tb;">Writing Mode tb</text>
  <text x="90" y="20" style="writing-mode:tb;text-orientation:upright;letter-spacing:-2">Vertical zero</text>
</svg>

5、文本路径

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
  <defs>
    <path id="curvepath" d="M 30 40 C 50 10 70 10 120 40 S 150 0 200 40" style="stroke:gray;fill:none;" />
    <path id="round-corner" d="M 250 30 L 300 30 A 30 30 0 0 1 330 60 L 330 110" style="stroke:gray;fill:none;" />
    <path id="sharp-corner" d="M 30 110 100 110 100 160" style="stroke:gray;fill:none;" />
    <path id="discontinuous" d="M 150 110 A 40 30 0 1 0 230 110 M 250 110 270 140" style="stroke:gray;fill:none;" />
  </defs>
  <g style="font-family:'liberation Sans';font-size:10pt;">
    <use xlink:href="#curvepath" />
    <text>
      <textpath xlink:href="#curvepath" startOffset="25%">
        Going round the bend
      </textpath>
    </text>

    <use xlink:href="#round-corner" />
    <text style="text-anchor:middle">
      <textpath xlink:href="#round-corner" startOffset="50%">
        Going round
      </textpath>
    </text>

    <use xlink:href="#sharp-corner" />
    <text>
      <textpath xlink:href="#sharp-corner">
        Going round the bend
      </textpath>
    </text>

    <use xlink:href="#discontinuous" />
    <text>
      <textpath xlink:href="#discontinuous">
        Going round the bend
      </textpath>
    </text>
  </g>
</svg>

标签：SVG,Two,插入,Going,bend,words,文本,round
来源： https://www.cnblogs.com/xl4ng/p/15863415.html