SVG 文本渲染属性

SVG（可缩放矢量图形）是一种基于 XML 的图像格式，可用于在 Web 网页和其他应用程序中显示图形。

SVG 文本渲染属性用于在 SVG 中设置文本的外观和样式。本文将介绍常用的 SVG 文本渲染属性。

font-family

font-family 属性用于设置文本字体。可以使用 CSS 中已定义的字体家族或者使用系统中安装的字体。下面是一个示例：

<style>
  @font-face {
    font-family: myFont;
    src: url(myfont.woff);
  }
</style>
<svg>
  <text x="50" y="50" font-family="myFont">Hello, World!</text>
</svg>

在上面的代码片段中，我们通过 @font-face 定义了一个名为 myFont 的字体，并将其指向了一个 .woff 文件。然后在 <text> 标签中使用 font-family 属性来指定使用 myFont 字体。

font-size

font-size 属性用于设置文本字号大小。可以使用绝对单位（如 px）或相对单位（如 em）。

<svg>
  <text x="50" y="50" font-size="36px">Hello, World!</text>
  <text x="50" y="100" font-size="2em">Hello, World!</text>
</svg>

在上面的代码片段中，我们使用 font-size 属性分别指定了两个不同的文本字号大小。

font-weight

font-weight 属性用于设置文本的粗细程度。可以设置为 normal、bold 或者 100-900 之间的数字。默认值为 normal。

<svg>
  <text x="50" y="50" font-weight="normal">Normal Text</text>
  <text x="50" y="100" font-weight="bold">Bold Text</text>
  <text x="50" y="150" font-weight="700">700 Weight Text</text>
</svg>

在上面的代码片段中，我们使用 font-weight 属性分别指定了三个不同的文本粗细程度。

text-decoration

text-decoration 属性用于为文本添加下划线、删除线等修饰样式。可以设置为 none、underline、overline、line-through 或者多种样式的组合。默认值为 none。

<svg>
  <text x="50" y="50" text-decoration="none">No Decoration</text>
  <text x="50" y="100" text-decoration="underline">Underline</text>
  <text x="50" y="150" text-decoration="overline">Overline</text>
  <text x="50" y="200" text-decoration="line-through">Line-Through</text>
  <text x="50" y="250" text-decoration="underline overline line-through">Multiple Decorations</text>
</svg>

在上面的代码片段中，我们使用 text-decoration 属性分别指定了五种不同的文本修饰样式。

text-anchor

text-anchor 属性用于设置文本的水平对齐方式。可以设置为 start、middle 或者 end。默认值为 start。

<svg>
  <text x="50" y="50" text-anchor="start">Text Anchor: Start</text>
  <text x="50" y="100" text-anchor="middle">Text Anchor: Middle</text>
  <text x="50" y="150" text-anchor="end">Text Anchor: End</text>
</svg>

在上面的代码片段中，我们使用 text-anchor 属性分别指定了三种不同的文本水平对齐方式。

alignment-baseline

alignment-baseline 属性用于设置文本的垂直对齐方式。可以设置为 auto、baseline、middle、central、text-top、text-bottom、top 或者 bottom。默认值为 auto。

<svg>
  <style>
    rect {
      fill: gray;
    }
    text {
      fill: white;
      font-size: 16px;
      font-family: sans-serif;
      alignment-baseline: middle;
    }
  </style>
  <rect x="40" y="20" width="120" height="80"></rect>
  <text x="100" y="60">Text Alignment</text>
</svg>

在上面的代码片段中，我们使用 alignment-baseline 属性指定了文本垂直居中对齐，并将文本放在了一个灰色矩形的中心。

direction

direction 属性用于设置文本的书写方向。可以设置为 ltr（从左到右）或者 rtl（从右到左）。默认值为 ltr。

<svg>
  <text x="50" y="50" direction="ltr">LTR Direction</text>
  <text x="50" y="100" direction="rtl">RTL Direction</text>
</svg>

在上面的代码片段中，我们使用 direction 属性分别指定了文本的书写方向。

以上就是常用的 SVG 文本渲染属性的介绍。这些属性可以帮助您在 SVG 中创建出美观、有吸引力的文本效果。