svg 文本与超链接


svg 中有两种文本模式,一种是写在图像中的文本,另一种是 svg 字体。本节只探讨前者。

文本

在 svg 中内嵌一个文本使用 <text> 元素,它的内部文本会被渲染,可以通过属性 xy 来对其进行简单的定位,比如:

<text x="10" y="10">我不懂我们是否有着各自的命运,还是我们生命中的偶然,像在风中飘,或许两者同时发生。——《阿甘正传》</text>

可以使用 text-anchor 来对文字进行排列,它有这些可能值:startmiddleendinherit,这个属性决定了文本基于 xy 所在点的文本流方向。比如:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="400">
	<defs>
		<linearGradient id="Gradient-1" x1="0" x2="1" y1="0" y2="0">
			<stop stop-color="skyblue" offset="0%" />
			<stop stop-color="blue" offset="100%" />
		</linearGradient>
	</defs>
	<text x="60" y="50" text-anchor="start" font-size="30px" fill="url(#Gradient-1)">start</text>
	<circle r="3" cx="60" cy="50" />
	<text x="60" y="100" text-anchor="middle" font-size="30px" fill="url(#Gradient-1)">middle</text>
	<circle r="3" cx="60" cy="100" />
	<text x="60" y="150" text-anchor="end" font-size="30px" fill="url(#Gradient-1)">end</text>
	<circle r="3" cx="60" cy="150" />
	<text x="60" y="200" text-anchor="inherit" font-size="30px" fill="url(#Gradient-1)">inherit</text>
	<circle r="3" cx="60" cy="200" />
</svg>

效果如下:

start middle end inherit

注意:svg 中的文本不会自动换行。

字体属性

文本的一个至关重要的部分是它显示的字体。SVG 提供了一些属性,类似于它们的 CSS 同行,用来激活文本选区。下列每个属性可以被设置为一个 SVG 属性或者成为一个 CSS 声明:font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing 和 text-decoration。

---MDN

都是 css 的属性,不在介绍。

需要注意的是,字体颜色依旧是 fill,并且 svg 文本支持使用 stroke 属性描边。

<tspan> 子文本

可以使用 <tspan> 来描述一段文本中的子文本,比如高亮一个单词。

<text y="20">
	你可以像疯狗一样对周围的一切
	<tspan fill="red">愤愤不平</tspan>
	,你可以诅咒命运,但是等到最后一刻,你还得平静的放手而去。
	---《本杰明·巴顿奇事》
</text>

tspan 还有很多其他属性:

  • xy 用来设置文本距离原本位置的偏移量,这个值可以是一个数列,数列的值会逐一作用到字符上直到数列结束。使用 “,” 隔开。该 tspan 元素后续的文本会受到最终定位的影响。

  • dxdy 同上,但是使用的是相对距离。

  • rotate 旋转字符的角度,注意是字符,不是整段文本。也可以使用数列,数列的值会逐一作用到字符上。如果数列不足,tspan 内的后续文本会按照最后一个角度旋转,旋转效果不会超出 tspan 元素。

  • textLength 用以设置文本的最低长度,当不足时自动填充空隙。

示例:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="200">
	<defs>
		<lineargradient id="gradient-3" x1="0" x2="1" y1="0" y2="0">
			<stop stop-color="skyblue" offset="0%" />
			<stop stop-color="blue" offset="100%" />
		</lineargradient>
		<style type="text/css">
			tspan {
				fill: url(#gradient-3);
				text-anchor: middle;
			}
		</style>
	</defs>
	<text>
		<tspan x="200" y="30" font-size="20">
			山园小梅二首
			<tspan dy="5" font-size="12" fill="silver">(其一)</tspan>
		</tspan>
		<tspan x="200" y="60" textlength="300">众芳摇落独暄妍,占尽风情向小园。</tspan>
		<tspan x="200" y="90" textlength="300">疏影横斜水清浅,暗香浮动月黄昏。</tspan>
		<tspan x="200" y="120" textlength="300">霜禽欲下先偷眼,粉蝶如知合断魂。</tspan>
		<tspan x="200" y="150" textlength="300">幸有微吟可相狎,不须檀板共金樽。</tspan>
	</text>
</svg>

效果图:

山园小梅二首 (其一) 众芳摇落独暄妍,占尽风情向小园。 疏影横斜水清浅,暗香浮动月黄昏。 霜禽欲下先偷眼,粉蝶如知合断魂。 幸有微吟可相狎,不须檀板共金樽。

<tref> 文本引用

使用 <tref> 可以引用已经定义的文本,并可以重新修改样式。

示例:

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

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

textPath

使用 <textPath> 元素的 xlink:href 属性可以根据任意路径对齐字符,比如让字体环绕在圆弧,贝塞尔曲线上,形成环绕。

示例:

<path id="my_path" d="M 20 100 c 50,80 100,-80 150,0" fill="transparent" />
<text>
	<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path" fill="tomato">这是一段飘着跑的文本段落</textPath>
</text>

效果大致如下:

这是一段飘着跑的文本段落

如果文本长度超过了路径长度会被隐藏。

超链接

svg 中的超链接和 HTML 中类似,用于跳转到一个 URL 上。

它还可以用来包裹其他图形,如 rectcircle 等,不过它不能直接包裹文本,包裹文本需要借助 text 元素。超链接的地址使用 xlink:href 来指定。

可以在 MDN 上找到其使用示例。

参考