Svg之文本 - bobby169/Snap.svgDoc GitHub Wiki

[TOC]

<text>元素基本属性

示例：文本的位置和轮廓

<svg id="svg" width="1000" height="1000" viewBox="0 0 1000 1000">
  <!-- 参考线 -->
  <path d="M 20 10, 20 120 M 10 30 100 30 M 10 70 100 70
M 10 110 100 110" style="stroke: gray;"/>
  <text x="20" y="30">Simplest Text</text>
  <text x="20" y="70" style="stroke: black;">Outlined/filled</text>
  <text x="20" y="110" style="stroke: black; stroke-width: 0.5;fill: none;">Outlined only</text>
  <text x="20" y="140" style="stroke: black; stroke-width: 4;fill: red; paint-order: stroke">Text Outlined</text>
</svg>

示例：文本样式

<g style="font-size: 18pt">
    <text x="20" y="20" style="font-weight:bold;">bold</text>
    <text x="120" y="20" style="font-style:italic;">italic</text>
    <text x="20" y="60" style="text-decoration:underline;">under</text>
    <text x="120" y="60" style="text-decoration:overline;">over</text>
    <text x="200" y="60" style="text-decoration:line-through;">through</text>
    <text x="20" y="90" style="word-spacing: 10pt;">more word space</text>
    <text x="20" y="120" style="word-spacing: -3pt;">less word space</text>
    <text x="20" y="150" style="letter-spacing: 5pt;">wide letter space</text>
    <text x="20" y="180" style="letter-spacing: -2pt;">narrow letter space</text>
</g>

文本对齐

<text> 元素让你指定了起始点，但是你并不能事先知道它的终点。这使得让文本居中对齐或者右对齐变得很困难。我们可以使用 text-anchor 属性来指定文本坐标生效的位置，它的值可以是 start、middle 或者 end。如果文字是从左向右书写的，这三个值分别表示左对 齐、居中对齐和右对齐。

http://oreillymedia.github.io/svg-essentials-examples/ch09/text_alignment.html

<svg width="250" height="60" viewBox="0 0 250 60"
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <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>

<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 改变文本的垂直位置

<text x="10" y="30" style="font-size:12pt;"> F <tspan dy="4">a</tspan>
    <tspan dy="8">l</tspan>
    <tspan dy="12">l</tspan>
</text>

示例：使用 <tspan> 进行绝对定位

如果你想使用绝对位置来设定偏移量，而不是相对元素本身的偏移量来设置，要使用 x 和 y 属性。在处理多行文本时使用这两个属性很方便。SVG 不会处 理换行符，不会自动断行，所以你需要手动为每一行设置 x 属性值，并使用 y 或者 dy 来垂直定位。你应该始终在 <text> 元素中使用 <tspan>，以便将相关联的行进行分组，这样不仅可以将它们作为一个单位一起选中，也会使文档更加结构化。

<text x="10" y="30" style="font-size:12pt;"> They dined on mince, and slices of quince, <tspan x="20" y="50">Which they ate with a
runcible spoon;</tspan>
<tspan x="10" y="70">And hand in hand, on the edge
of the sand,</tspan>
<tspan x="20" dy="20">They danced by the light of the moon.</tspan>
</text>

示例：在 <tspan> 中为 dx、dy、rotate 设置多个值

如果你需要一次修改多个字母的位置，可以为 x、y、dx、dy 和 rotate 属性一次设置一系 列的值。

  <text x="30" y="30" style="font-size:14px">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 上标下标

尽管可以使用 dy 属性来产生上标和下标，但使用 baseline-shift 属性会更简单,这个属性的值可以为 super 和 sub。你也可以指定一个长度值，如 0.5em，或者相对 字体尺寸进行计算的百分比。baseline-shift 的影响范围仅限于它所在的 <tspan> 元素。

  <text x="20" y="25" style="font-size: 12pt;">
    C<tspan style="baseline-shift: sub;">12</tspan>
    H<tspan style="baseline-shift: sub;">22</tspan>
    O<tspan style="baseline-shift: sub;">11</tspan> (sugar) </text>
  <text x="20" y="70" style="font-size: 12pt;"> 6.02 x 10<tspan baseline-shift="super">23</tspan> (Avogadro's number)</text>

设置文本长度

示例：textLength 和 lengthAdjust 的使用

尽管之前说过，我们无法提前知道一段文本的结束位置，但可以使用 textLength 属性显式设置文本的长度。SVG会将文本调整到指定的长度。在调整的时候，可以只调整字符之间的间距，保持字符本身大小不变，也可以同时调整字符的间距和字符本身的大小。如果你只想调整字符的间距，可以将 lengthAdjust 属性值设为 spacing(默认值)。如果你希望 SVG 同时调整字符间距和字符本身的大小，则将 lengthAdjust 值设置为 spacingAndGlyphs。

  <g style="font-size: 14pt;">
    <path d="M 20 10 20 70 M 220 10 220 70" style="stroke: gray;"/>
    <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>

纵向文本

一种方法是使用变换(transform)将文本旋转 90 度。另一种方 法是将 writing-mode 属性值设为 tb(top to bottom，从上到下)。

  <text x="10" y="20" transform="rotate(90,10,20)">Rotated 90</text>
  <text x="50" y="20" style="writing-mode: tb;">Writing Mode tb</text>
  <text x="90" y="20" style="writing-mode: tb;glyph-orientation-vertical: 0;">Vertical zero</text>

文本路径

示例：textPath

http://oreillymedia.github.io/svg-essentials-examples/ch09/text_path.html

 <defs>
    <path id="curvepath"
        d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40"
        style="stroke: gray; fill: none;"/>

    <path id="round-corner"
        d="M250 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 290 160"
        style="stroke: gray; fill: none;"/>
  </defs>


  <g id="drawPaths" style="display:block">
    <use xlink:href="#curvepath"/>
    <use xlink:href="#round-corner"/>
    <use xlink:href="#sharp-corner"/>
    <use xlink:href="#discontinuous"/>
  </g>

  <text style="font-family: 'Liberation Sans'; font-size: 10pt;">
      <textPath xlink:href="#curvepath">
      Following a cubic Bézier curve.
      </textPath>
  </text>

  <text style="font-family: 'Liberation Sans'; font-size: 10pt;">
      <textPath xlink:href="#round-corner">
      Going 'round the bend
      </textPath>
  </text>

  <text style="font-family: 'Liberation Sans'; font-size: 10pt;">
      <textPath xlink:href="#sharp-corner">
      Making a quick turn
      </textPath>
  </text>

  <text style="font-family: 'Liberation Sans'; font-size: 10pt;">
      <textPath xlink:href="#discontinuous">
      Text along a broken path
      </textPath>
  </text>

示例：文本的长度和起始位置

你可以通过设置 startOffset 属性(百分比或长度)来调整文本在路径上开始的位置。比 如 startOffset="25%" 表示文本起始位置在路径的四分之一处，startOffset="30" 表示文本起始位置在路径开始 30 个用户单位后。如果你希望文本相对路径居中，如示例只需要在 <text> 元素上设置 textanchor="middle" 并在 <textPath> 元素上设置 startOffset="50%" 即可。超出路径结尾处的文本会被截断，只会显示左边的部分

http://oreillymedia.github.io/svg-essentials-examples/ch09/start_offset.html

<defs>
    <path id="short-corner" transform="translate(40,40)"
          d="M0 0 L 30 0 A 30 30 0 0 1 60 30 L 60 60" style="stroke: gray; fill: none;"/>
    <path id="long-corner" transform="translate(140,40)" d="M0 0 L 50 0 A 30 30 0 0 1 80 30 L 80 80"
          style="stroke: gray; fill: none;"/>
</defs>
<g style="font-family: 'Liberation Sans'; font-size: 12pt"> 
    <use xlink:href="#short-corner"/>
    <text>
      <textPath xlink:href="#short-corner"> This text is too long for the path. </textPath>
    </text>
    <use xlink:href="#long-corner"/>
    <text style="text-anchor: middle;">
      <textPath xlink:href="#long-corner" startOffset="50%"> centered</textPath>
    </text>
</g>

案例：为图形添加文本

  <defs>
    <font-face font-family="bakbatn">
      <font-face-src>
        <font-face-uri xlink:href="kfont.svg#kfont-defn">
          <font-face-format string="svg" /> </font-face-uri>
      </font-face-src>
    </font-face>
    <path id="upper-curve" d="M -8 154 A 162 130 0 1 1 316 154"/>
    <path id="lower-curve" d="M -21 154 A 175 140 0 1 0 329 154"/>
  </defs>

  <ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/>
  <ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/>
  <!-- 浅红色大半圆填充符号的上半部分，其下方“浸入"符号左下方的浅红色小半圆 -->
  <path d="M 302 152 A 150 120, 0, 1, 0, 2 152 A 75 60, 0, 1, 0, 152 152" style="fill: #ffcccc;"/>
  <!-- 浅蓝色小半圆，填充符号右上方 -->
  <path d="M 152 152 A 75 60, 0, 1, 1, 302 152" style="fill: #cceeff;"/>
  <text font-family="bakbatn, serif"
        style="font-size: 24pt; text-anchor: middle;">
    <textPath xlink:href="#upper-curve" startOffset="50%"> 서울 - 대한민국</textPath>
  </text>
  <text style="font-size: 14pt; text-anchor: middle;">
    <textPath xlink:href="#lower-curve" startOffset="50%"> Seoul - Republic of Korea</textPath>
  </text>
⚠️ **GitHub.com Fallback** ⚠️