svg-文本

svg 可以使用 <text>、<tspan> 来创建文本。

1. 位置

• x、y 决定了文本在视图中显示的位置
• dx、dy 用于设置文本相对于当前位置的偏移量

• 如果 dx、dy 的值是多个值，则从第二个值开始，表示文本内字符的间距

  2. 对齐

• text-anchor： 设置水平对齐，包括：start middle end inherit

• dominant-baseline： 设置垂直对齐，包括：auto central middle text-before-edge text-after-edge…

3. 样式

• 可以使用：fill stroke stroke-width opacity 等 svg 属性
• 可以使用：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing、text-decoration 等属性

4. tspan

• tspan 必须是一个 text 元素或其他 tspan 元素的子元素
• x 为容器设置一个新绝对 x 坐标，它覆盖了默认的当前的文本位置。这个属性可以包含一个数列，他们将一个一个的应用到 tspan 元素内的每一个字符上（y 同理）
• dx 从当前位置，用一个水平偏移开始绘制文本。这里，可以提供一个值数列，可以应用到连续的字体，因此每次累计一个偏移（dy 同理）
• rotate 把所有字符旋转一个角度。如果是一个数列，则使每个字符分别旋转到那个值，剩下的字符根据最后一个值旋转

5. textPath

• 元素利用路径文本 textPath 的 xlink:href 属性取得一个任意路径，把字符对齐到路径
• 使用 textPath 时， x 位置路径，y 无效
• startOffset 确定排列的起始位置

6. 示例

<svg viewBox='0 0 800 200' width='800' height='200' style='border: 1px solid'>
  <polyline points="60 20, 60 80" fill="transparent" stroke="black"/>
  <text x="60" y="20" text-anchor="start">start</text>
  <text x="60" y="20" text-anchor="start">start</text>
  <text x="60" y="50" text-anchor="middle">middle</text>
  <text x="60" y="80" text-anchor="end">end</text>
  <polyline points="10 150, 790 150" fill="transparent" stroke="black"/>
  <text x="0" y="150" dominant-baseline="start">start</text>
  <text x="0" y="150" dominant-baseline="start">start</text>
  <text x="50" y="150" dominant-baseline="central">central</text>
  <text x="120" y="150" dominant-baseline="middle">middle</text>
  <text x="180" y="150" dominant-baseline="text-before-edge">text-before-edge</text>
  <text x="250" y="150" dominant-baseline="text-after-edge">text-after-edge</text>
  <text x="380" y="150" dominant-baseline="no-change">no-change</text>
  <text x="470" y="150" dominant-baseline="hanging">hanging</text>
  <text x="530" y="150" dominant-baseline="reset-size">reset-size</text>
  <text x="620" y="150" dominant-baseline="ideographic">ideographic</text>
</svg>

<svg viewBox='0 0 400 200' width='400' height='200' style='border: 1px solid'>
  <text x='20' y='50' stroke='red' font-size='60px' font-weight='bold' fill='none' letter-spacing='3' stroke-width='0.5'>leo</text>
  <text x='20' y='100' font-size='18'>
    <tspan font-weight="bold" font-size='30'>leo</tspan>weiy
  </text>
  <text x="20" y="150">
    leo<tspan x="100 100" y="150 130 110" dx="0 10 10 10 10 10" dy='0 10 10' rotate="15 15 60" font-size='20' font-weight="bold" >weiy</tspan>
  </text>
</svg>

<svg viewBox='0 0 400 200' width='400' height='200' style='border: 1px solid'>
   <path id="my_path" d="M20 40, Q100 100 200 40" fill="none" stroke='red' />
  <text x='10'>
    <textPath startOffset='10%' xlink:href="#my_path">casstime bricks</textPath>
  </text>
</svg>

学习链接

• https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Texts