【D3.V3.js系列课程】-（十四）有路径的文字-JavaSript-爱易网页

【D3.V3.js系列课程】-（十四）有路径的文字

日期：2014-05-16　浏览次数：20333 次

【D3.V3.js系列教程】--（十四）有路径的文字

1、在 svg 中插入一個 text

// 在 body 中插入一個 svg
var svg = d3.select('body').append('svg');

// 在 svg 中插入一個 text
svg.append('text')
.attr('x', 10)
.attr('y', 20)
.style('fill', 'steelblue')
.style('font-size', '24px')
.style('font-weight', 'bold')
.text('.text加入文字测试！');

2、添加文字路径

// 先在 svg 中插入一個 path
svg.append('path').attr({
id: 'mypath',
d: 'M50 100Q350 50 350 250Q250 50 50 250'
}).style({
fill: 'none',
stroke: 'green',
'stroke-width': 10
});

.append('textPath').attr({//引用路径
'xlink:href': '#mypath'
})

3、源码

<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
		<title>testD3-12-text.html</title>
		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
	<style type="text/css">
	</style>
	</head>
	<body>
		<script type="text/javascript">
// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 // 先在 svg 中插入一個 path
	svg.append('path').attr({
		id: 'mypath',
		d: 'M50 100Q350 50 350 250Q250 50 50 250'
	}).style({
		fill: 'none',
		stroke: 'green',
		'stroke-width': 10
	});
	// 在 svg 中插入一個 text
	svg.append('text')
	.attr('x', 10)
	.attr('y', 20)
	.style('fill', 'steelblue')
	.style('font-size', '24px')
	.style('font-weight', 'bold')
	.append('textPath').attr({//引用路径
		'xlink:href': '#mypath'
	})
	.text('.text加入文字测试！并用xlink:href: #mypath加入了路径');
		</script>

	</body>
</html>

4、效果

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。