svgdr教程·冒泡提示语

马黑黑 · 发表于 2024-11-21 12:01

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

提示冒泡 title

和HTML不同，svg元素（含父子元素）的提示冒泡不能通过 title 属性实现，它需要一个 <title> 标签，且子元素的title标签要连同子元素标签一起放入一个g分组。

指令：title()

参数：str, [target]

语法：title(str, [target])

参数说明：

① str - 必须，字符型，提示冒泡语句
② target - 可选，字符型，缺省时定义子元素的冒泡语，参数值为'svg'时定义SVG自己的冒泡语

* 为svg子元素创建提示语时，titile() 指令会自动生成g标签且重新组织元素代码

下面的svg空空荡荡，不过，当鼠标指针移到它那里会有一个提示语，根据提示可以在上面做点什么：

实现上述提示语功能的代码就是 <title> 标签，至于点击画圆在JS里并不复杂，下面是 svgdr 实现代码：

dr.title('单击SVG窗体生成圆','svg'); //第二个参数 svg 表示设定svg画布提示语
//svg1点击事件 ：画圆
svg1.onclick = (e) => {
	var x = e.offsetX,
		y = e.offsetY,
		r = Math.random() * 30 + 10,
		color = `#${Math.random().toString(16).substring(2, 8)}`;
	dr.circle(x,y,r,color);
};

代码中第一行 title() 指令生成的SVG代码如下：

可以看到，SVG使用一个 <title> 标签来实现svg画布的提示语冒泡功能。svg子元素的提示语也需要title标签，下例是在上例基础上添加子元素即圆的提示语，提示语的内容是圆的序号，画完圆之后鼠标指针停留一小会儿或随后再将鼠标指针移动到圆的上面都可以看到提示语效果：

以下是 svgdr 绘制代码：

var c_idx = 0; //圆的序号
dr.title('单击SVG窗体生成圆','svg');
//svg2点击事件 ：画圆并为圆生成冒泡提示语
svg2.onclick = (e) => {
	c_idx ++; //序号自增
	var x = e.offsetX,
		y = e.offsetY,
		r = Math.random() * 30 + 10,
		color = `#${Math.random().toString(16).substring(2, 8)}`;
	dr.circle(x,y,r,color).title('圆' + c_idx); //title() 指令第二个参数空表示设定子元素提示语
};

以任意一个圆为例，所生成的SVG代码是这样：

<svg id="msvg" width="800" height="400" xmlns="http://www.w3.org/2000/svg">
	<title>点击画圆</title>
	<g>
		<title>圆6</title>
		<circle cx="100" cy="100" r="40" fill="pink"></circle>
	</g>
</svg>

注意比较基于svg画布和基于svg子元素的title的组织方式。SVG窗体的冒泡提示语，title标签写在svg标签的下一行，其子元素如果需要提示语，title标签放在子元素代码的上一行，它们都要放到g标签里面。

返回目录