SVG - 文本_SVG 菜鸟教程

<text> 元素用于绘制文本。

声明

以下是 <text> 元素的语法声明。我们只展示了主要属性。

<text
	 x="x-cordinates"
	 y="y-cordinates"
		
	 dx="list of lengths"
	 dy="list of lengths"
		
	 rotate="list of numbers"
	 textlength="length"
	 lengthAdjust="spacing" >
</text>

属性

属性	描述
x	文字的 x 轴坐标。
y	文字的 y 轴坐标。
dx	沿 x 轴移动。
dy	沿 y 轴移动。
rotate	应用于所有字形的旋转。
textlength	文本的渲染长度。
lengthAdjust	使用文本的渲染长度进行调整的类型。

例

testSVG.htm

<html>
	 	<title>SVG Text</title>
	 	<body>

	 	 	 <svg width="800" height="100">
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="12" >Text: </text>
	 	 	 	 	 	 <text x="30" y="30" fill="rgb(121,0,121)">WWW.qikepu.COM</text>
	 	 	 	 	</g>	
	 	 	 </svg>
	 	
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

旋转文本

<html>
	 	<title>SVG Text</title>
	 	<body>
	 	
	 	 	 <h1>Sample SVG Text</h1>
	 	 		
	 	 	 <svg width="800" height="100">
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="12" >Multiline Text: </text>
	 	 	 	 	 	 <text x="30" y="30" fill="rgb(121,0,121)">WWW.qikepu.COM
	 	 	 	 	 	 <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
	 	 	 	 	 	 <tspan x="30" y="70">We teach just for free.</tspan>
	 	 	 	 	 	 </text>
	 	 	 	 	</g>
	 	 	 </svg>
	 	 		
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

多行文本

<html>
	 	<title>SVG Text</title>
	 	<body>
	 	 		
	 	 	 <svg width="570" height="100">
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="12" >Multiline Text: </text>
	 	 	 	 	 	 <text x="30" y="30" fill="rgb(121,0,121)">WWW.qikepu.COM
	 	 	 	 	 	 	 	<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
	 	 	 	 	 	 	 	<tspan x="30" y="70">We teach just for free.</tspan>
	 	 	 	 	 	 </text>
	 	 	 	 	</g>
	 	 	 </svg>
	 	 		
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

超链接文本

<html>
	 	<title>SVG Text</title>
	 	<body> 	 		
	 	 	 <svg width="800" height="100">
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="10" >Text as Link: </text>
	 	 	 	 	
	 	 	 	 	 	 <a xlink:href="http://www.qikepu.com/svg/" target="_blank">
	 	 	 	 	 	 	 	<text font-family="Verdana" font-size="20" 	x="30" y="30"	
	 	 	 	 	 	 	 	fill="rgb(121,0,121)">WWW.qikepu.COM</text>
	 	 	 	 	 	 </a>
	 	 	 	 	</g>
	 	 	 </svg>
	 	 		
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

<< SVG - 形状 SVG - 描边 >>