<text> 元素用于在SVG图形中插入文本。它允许你指定文本的位置、字体、大小、颜色等样式属性。通过<text>元素，你可以将文本内容嵌入到图形中，创建具有视觉效果的文字说明、标签或注释等。

目录

  1. 基本语法
  2. 属性详解
  3. 文本对齐
  4. 文本换行与换行符
  5. 示例代码
  6. 参考资料
  7. 出站链接

基本语法

<svg width="300" height="200">
  <text x="10" y="40" fill="black" font-size="20" font-family="Arial">Hello, SVG!</text>
</svg>
  • x：指定文本起始点的横坐标。
  • y：指定文本起始点的纵坐标。
  • fill：指定文本的填充颜色。
  • font-size：指定文本的字体大小。
  • font-family：指定文本的字体系列。

属性详解

  1. x 和 y：
    • x 和 y 属性决定了文本的起始位置（左下角）。它们定义了文本的“锚点”位置。
    • 如果你想对文本进行多行排布，可以使用 tspan 元素来组织文本。
  2. dx 和 dy：
    • dx 和 dy 属性可以用来对已有文本位置进行相对调整。dx 控制文本水平移动，dy 控制文本垂直移动。
  3. fill：
    • fill 属性用于设置文本的填充颜色，可以是颜色名称、RGB值、HEX值等。
  4. font-size：
    • font-size 属性定义文本的字体大小，单位通常是像素（px）或其他CSS单位。
  5. font-family：
    • font-family 属性定义文本使用的字体。如果指定的字体不可用，则会回退到默认字体。
  6. text-anchor：
    • text-anchor 属性用于控制文本的对齐方式。常见值为 start（默认值，左对齐）、middle（居中对齐）和 end（右对齐）。
  7. stroke：
    • stroke 属性用于设置文本的描边颜色。可以与 stroke-width 配合使用。
  8. stroke-width：
    • stroke-width 属性指定文本描边的宽度。
  9. letter-spacing：
    • letter-spacing 属性定义字母之间的间距，单位为像素或其他CSS单位。
  10. word-spacing：
  • word-spacing 属性定义单词之间的间距。
  1. writing-mode：
  • writing-mode 属性控制文本的书写方向（例如，垂直书写或水平书写）。

文本对齐

通过 text-anchor 属性可以调整文本的对齐方式。常用的对齐方式如下：

  • start：文本左对齐（默认对齐方式）。
  • middle：文本居中对齐。
  • end：文本右对齐。

示例：

<svg width="300" height="200">
  <text x="150" y="40" text-anchor="middle" font-size="20" fill="black">Centered Text</text>
</svg>

在这个示例中，文本“Centered Text”会在 (150, 40) 位置居中对齐。

文本换行与换行符

SVG中的文本不会自动换行。如果需要换行，可以使用 <tspan> 元素。

示例：换行

<svg width="300" height="200">
  <text x="10" y="40" font-size="20" fill="black">
    <tspan x="10" dy="30">Hello,</tspan>
    <tspan x="10" dy="30">SVG!</tspan>
  </text>
</svg>
  • 在这个示例中，<tspan> 元素用于在文本中插入换行符，使文本显示在不同的行上。

示例代码

  1. 基本文本
<svg width="300" height="200">
  <text x="10" y="40" fill="black" font-size="20" font-family="Arial">Hello, SVG!</text>
</svg>
  • 这个例子展示了简单的文本元素，文本内容为“Hello, SVG!”。
  1. 文本对齐
<svg width="300" height="200">
  <text x="150" y="40" text-anchor="middle" font-size="20" fill="black">Centered Text</text>
</svg>
  • 这个例子展示了文本在水平居中的对齐方式。
  1. 多行文本
<svg width="300" height="200">
  <text x="10" y="40" font-size="20" fill="black">
    <tspan x="10" dy="30">Hello,</tspan>
    <tspan x="10" dy="30">SVG!</tspan>
  </text>
</svg>
  • 这个例子展示了如何使用 <tspan> 元素将文本分成多行。
  1. 带描边的文本
<svg width="300" height="200">
  <text x="10" y="40" fill="white" stroke="black" stroke-width="1" font-size="30" font-family="Arial">Outlined Text</text>
</svg>
  • 这个例子展示了具有描边效果的文本，文本内容为“Outlined Text”。
  1. 文本与字体样式
<svg width="300" height="200">
  <text x="10" y="40" font-size="20" font-family="Verdana" font-style="italic" fill="purple">Italic Text</text>
</svg>
  • 这个例子展示了文本的字体样式为斜体（font-style="italic"）和字体为“Verdana”。

参考资料

出站链接

  • Inkscape: 一个免费的矢量图形设计工具，支持SVG格式。
  • SVGOMG: 在线SVG优化工具，可以减小SVG文件大小。

通过<text>元素，SVG使得在网页中插入文本变得非常灵活。你不仅能控制文本的外观和位置，还可以轻松实现文本的复杂布局和样式调整。在实际应用中，常常结合CSS和其他SVG元素一起使用，以创建富有创意的图形和文字内容。