SVG基础----绘制SVG文字

1、绘制文字

<svg>
    <text x="100" y="100">这是SVG文字</text>
</svg>

SVG文字的位置有<svg>元素的x和y属性来决定。x属性决定文字的左边部位置（文字的开始位置），y属性决定文字的下边部位置（注意这里不是上边部）

<svg>
    <text x="100" y="100" text-anchor="start">这是SVG文字</text>
    <text x="100" y="120" text-anchor="middle">这是SVG文字</text>
    <text x="100" y="140" text-anchor="end">这是SVG文字</text>
</svg>

文字的anchor决定哪个部分的文字放置在text元素中的x属性定义的位置。默认的anchor是文字左边部，即文字的开始处。你也可以将anchor设置为middle，使它位于文字的中间，设置为end，使它位于文字的右边

2、文字描边

<svg>
    <text x="100" y="100" style="stroke: #1D7DB1;stroke-width: 1;fill:none;font-size: 36px;">这是SVG文字</text>
</svg>

3、文字间距和字距

我们可以使用letter-spacing和kerning属性来控制文字的间距和字距调整，可以使用word-spacing CSS属性来指定单词的间距

<svg>
    <text x="100" y="100" style="stroke: #1D7DB1;stroke-width: 1;fill:#27AE60;font-size: 36px;letter-spacing: 2;">这是SVG文字</text>
</svg>

<svg>
    <text x="100" y="100" style="stroke: #1D7DB1;stroke-width: 1;fill:#27AE60;font-size: 36px;kerning: 2;">这是SVG文字</text>
</svg>

<svg>
    <text x="100" y="100" style="stroke: #1D7DB1;stroke-width: 1;fill:#27AE60;font-size: 20px;word-spacing: 10;">Hello World ,my name is susan</text>
</svg>

4、旋转文本

<svg>
    <text x="100" y="100" transform="rotate(30 20,50)" style="stroke: #1D7DB1;stroke-width: 1;fill:#27AE60;font-size: 20px;word-spacing: 10;">Hello World </text>
</svg>

5、制作多行文本

svg 的<tspan>元素用于绘制SVG多行文本。

<svg>
    <text x="40" y="50">
        <tspan>Susan</tspan>
        <tspan>John</tspan>
    </text>
</svg>

可以在<tspan>元素中使用dy属性，第二行文字会显示在第一行文字下方，距离为10像素

如果你在<dy>属性中写了多个数字，那么每一个数字会被应用到<tspan>元素的每一个字符上

<svg>
    <text x="40" y="50">
        <tspan>Susan</tspan>
        <tspan dy="10">John</tspan>
    </text>
</svg>

<svg>
    <text x="40" y="50">
        <tspan dy="1 2 3 4">Susan</tspan>
        <!--<tspan dy="10">John</tspan>-->
    </text>
</svg>

将dx的值设置为30的效果，现在第二行文字在水平方向上相对于第一行文字向右偏移了30像素

如果你在<dx>属性中写了多个数字，那么每一个数字会被应用到<tspan>元素的每一个字符上

<svg>
    <text x="40" y="50">
        <tspan>Susan</tspan>
        <tspan dx="30" dy="10">John</tspan>
    </text>
</svg>

<svg>
    <text x="40" y="50">
        <tspan dx="1 2 3 4">Susan</tspan>
        <!--<tspan dx="30" dy="10">John</tspan>-->
    </text>
</svg>

<svg>
    <text y="50">
        <tspan x="40">Susan</tspan>
        <tspan x="40" dy="20">John</tspan>
        <tspan x="40" dy="20">Jerry</tspan>
    </text>
</svg>

可以在<tspan>元素设置x属性来修正<text>元素的X坐标。使用这种方法你可以显示多行头部对齐的文字

可以为<tspan>元素添加样式

<svg>
    <text x="50" y="50">
        My name is <tspan style="font-weight: bold;">susan</tspan>.
    </text>
</svg>

可以通过baseline-shift CSS属性将一个<tspan>元素设置为上标或下标

<svg>
    <text x="50" y="50">
        这是文本的<tspan style="baseline-shift: super">上标</tspan>和<tspan style="baseline-shift: sub;">下标</tspan>。
    </text>
</svg>

 6、SWITCH元素

在SVG中，可以使用<switch>元素来匹配不同的语言，在不同的浏览器语言环境中显示不同的SVG文字

<svg>
  <switch>
      <g systemLanguage="en-UK">
          <text x="10" y="20">UK English</text>
      </g>
      <g systemLanguage="en">
          <text x="10" y="20">English</text>
      </g>
      <g systemLanguage="es">
          <text x="10" y="20">Spanish</text>
      </g>
      <g systemLanguage="zh">
          <text x="10" y="20">中文</text>
      </g>
  </switch> 
</svg>           

这个属性的浏览器兼容性如下：

• Chrome 1.0+
• Firefox (Gecko) 1.8+
• Internet Explorer 9.0+
• Opera 8.0+
• Safari 3.0.4+
• Android 3.0+
• Firefox Mobile (Gecko) 1.8+
• Safari Mobile 3.0.4+
• IE Mobile 不支持