SVG 文本 - <text>

🌙
手机阅读
本文目录结构

SVG 文本 - <text>

<text> 元素用于定义文本。

基础

在一个SVG文档中,<text>元素内部可以放任何的文字。

<text x="10" y="10">Hello AXIHE.com!</text>

属性x和属性y性决定了文本在视口中显示的位置。

属性text-anchor,可以有这些值:start、middle、end或inherit,允许决定从这一点开始的文本流的方向。

和形状元素类似,属性fill可以给文本填充颜色,属性stroke可以给文本描边,形状元素和文本元素都可以引用渐变或图案, 相比较CSS2.1只能绘制简单的彩色文字,SVG显得更具有优势。


设置字体属性

文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性,类似于它们的CSS同行,用来激活文本选区。

下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明:

font-familyfont-stylefont-weightfont-variantfont-stretchfont-sizefont-size-adjustkerningletter-spacingword-spacingtext-decoration


其它文本相关的元素

tspan节

该元素用来标记大块文本的子部分,它必须是一个text元素或别的tspan元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色。

<text>
  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>

tspan元素有以下的自定义属性:

x

为容器设置一个新绝对x坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列,它们将一个一个地应用到tspan元素内的每一个字符上。

dx

从当前位置,用一个水平偏移开始绘制文本。这里,你可以提供一个值数列,可以应用到连续的字体,因此每次累积一个偏移。

此外还有属性y和属性dy作垂直转换。

rotate

把所有的字符旋转一个角度。如果是一个数列,则使每个字符旋转分别旋转到那个值,剩下的字符根据最后一个值旋转。

textLength

这是一个很模糊的属性,给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值,则允许渲染引擎精细调整字型的位置。

tref

tref元素允许引用已经定义的文本,高效地把它复制到当前位置。你可以使用xlink:href属性,把它指向一个元素,取得其文本内容。你可以独立于源样式化它、修改它的外观。

<text id="example">This is an example text.</text>

<text>
    <tref xlink:href="#example" />
</text>

textPath

该元素利用它的 xlink:href 属性取得一个任意路径,把字符对齐到路径,于是字体会环绕路径、顺着路径走:

<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" />
<text>
  <textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>

实例 写一个文本:

I love SVG

下面是SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>

实例 旋转的文字:

下面是SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

实例

I love SVG

实例 路径上的文字:

下面是SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

实例

I love SVG I love SVG

实例 元素可以安排任何分小组

元素可以安排任何分小组与<tspan> 元素的数量。每个<tspan> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素):

下面是SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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>

实例

Several lines: First line Second line

实例 作为链接文本( <a> 元素)

下面是SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="https://www.axihe.com/edu/svg/edu/index.html" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
  </a>
</svg>

实例

I love SVG

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了