svg 文字

<text>标签

在svg中用使用<text>标签去定义一段文字。如 Example 1css

在svg中写下html

在平坦的路上曲折前行svg

Example 1 Domespa

<svg height="30" width="200">
    <text x="0" y="15" fill="red">在平坦的路上曲折前行</text>
</svg>

在例子1中 x="0" y="15" 是文字定位坐标
可能你会有疑问,为何文字没有距离上边是15呢?这里首先你须要了解个概念baseline 熟悉css的同窗会眼熟 会用到 vertical-align: baseline; 可是什么是 baseline呢?
baseline
这不是咱们的重点了解移步到《CSS Baseline: The Good, The Bad And The Ugly》 译文:《CSS基线之道
在svg中xy 的坐标就是 基于baseline 如图:
baseline
因此就看不到预想的文字没有距上边15px。.net

<tspan>标签

你也能够把<text>标签 设定为文本组,其中能够包含<tspan>,并且每一个<tspan>均可以有不一样的定位和文本格式。code

Example 2 Domeorm

<svg height="90" width="200">
    <text x="10" y="20" style="fill:red;">Several lines:
        <tspan x="10" y="45">First line.</tspan>
        <tspan x="10" y="70">Second line.</tspan>
    </text>
</svg>

若是没有设置tspan 的 x y 那么文本会相似 css 中行内展现xml

svg中的文字链接

你能够把文字设置成连接
Example 3 Domehtm

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
        <text x="0" y="15" fill="red">I love SVG!</text>
    </a>
</svg>

这里注意下,按照html的习惯直接在a 标签里写文字是不能够的,文字不会显示,这里文字是个文本对象,你要设置这个对象的连接。对象

transform

到如今svg中的文字标签能知足常规的须要,看似简单,其实否则——“大有可为”!~

好比让文字旋转下Example 4

Example 4 Dome

<svg height="60" width="200">
    <text x="0" y="15" fill="red" 
            transform="rotate(30 20,40)">在平坦的路上曲折前行</text>
</svg>

transform="rotate(30 20,40)" 表示在 (20.40)位置顺时针旋转30度

dx dy

svg 中虽然没有提供排版的相关支持,可是你能够 经过 dx dy 来设置错落的文字
让咱们感觉下:

Example 5 Dome

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" height="300" viewBox="0,0,400,300">
    <text x="10" y="20">
        <tspan dx="0 5 10 15 20">12345</tspan> 
    </text>
    <text x="10" y="65">
        <tspan dy="0 5 10 15 20">12345</tspan> 
    </text>
    <text x="10" y="150">
        <tspan dx="0 5 10 15 20" dy="0 5 10 15 20">12345</tspan> 
    </text>
    <text x="10" y="215">
        <tspan dx="0 5 10 15 20" dy="0 5 10 15 20">我爱你中国</tspan> 
    </text>
</svg>

rotate

rotate 文字的旋转属性,rotate能够是个数值列表分别做用于对应的字母,以下面例子
Example 6 Dome

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" height="300" viewBox="0,0,400,300">
    <text x="10" y="20">
        <tspan rotate="0 5 10 15 25">在平坦的路上曲折前行</tspan> 
    </text>
</svg>

仍是得把baseline拿出来,旋转的单位是度,由于咱们的习惯是屏幕定位,因此旋转是沿着y轴顺时针旋转。旋转基于每一个字母的基线和字母左边。在例子中,文字(字母)是多于rotate的,这时候按照rotate list 的最后一个规则定义多出的字母。
rotate

textLength

textLength很差理解,不是文字的长度的意思,指定文字以 textLength 的 SVG viewer去两端对齐排这些文字相似 css text-align:justify

Example 7 Dome

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" height="300" viewBox="0,0,400,300">
    <text x="10" y="20">
        <tspan textLength="400" >在平坦的路上曲折前行</tspan> 
    </text>

</svg>

还有个属性配合textLength使用----lengthAdjust
lengthAdjust 有两个值spacing (默认)和 spacingAndGlyphs当设置成spacingAndGlyphs的时候,会拉伸字母,知道适合充满textLength 不太好理解,看下实例就懂了。

Example 7 Dome

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" height="300" viewBox="0,0,400,300">
    <text x="0" y="20">
        <tspan 
                textLength="400" 
                lengthAdjust="spacing"
                >在平坦的路上曲折前行</tspan> 
    </text>
    <text x="0" y="80">
        <tspan 
                textLength="400" 
                lengthAdjust="spacingAndGlyphs"
                >在平坦的路上曲折前行</tspan> 
    </text>
</svg>

<path>的使用

<path>标签的使用:
使用过Illustrator的朋友都知道,咱们可让文字跟随路径,作出各类形状的文字。咱们须要用<defs>来定义<path>(会在大漠以后相关文章中介绍)。定义好路径后,文字就能够跟着定义的路径跑了。

Example 8 Dome

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" height="300" viewBox="0,0,400,300">
    <defs>
          <path id="a1" 
                  d="M0 50 C150 150 100 -50 300 50" 
                  stroke="#000" fill="none"/>
    </defs>
    <text>
       <textPath xlink:href="#a1">在平坦的路上曲折前行</textPath>
    </text>
    <text dy="30">
       <textPath startOffset="30%" xlink:href="#a1">在平坦的路上曲折前行</textPath>
    </text>
 
</svg>

xlink:href 来指定<path> startOffset 来指定在路径上的起始位置。

这里xlink:href 不但能指定路径,还能指定一段文字。如例子:

Example 9 Dome

相关文章
相关标签/搜索