svg 文本与超链接

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

文本

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

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

可以使用 text-anchor 来对文字进行排列，它有这些可能值：start、middle、end 或 inherit，这个属性决定了文本基于 x 和 y 所在点的文本流方向。比如：

<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 还有很多其他属性：

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

  • dx、dy 同上，但是使用的是相对距离。

  • 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 上。

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

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

参考

关于此文档