svgdr教程·冒泡提示语
<style>.art p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
.art svg { outline: 1px solid silver; }
.tRed { color: red; }
</style>
<div class="art">
<h2>提示冒泡 title</h2>
<p>和HTML不同，svg元素（含父子元素）的提示冒泡不能通过 title 属性实现，它需要一个 <span class="tRed"><title></span> 标签，且子元素的title标签要连同子元素标签一起放入一个g分组。</p>
<p>指令：<mark>title()</p>
<p>参数：<mark>str, </mark></p>
<p>语法：<mark>title(str, )</mark></p>
<p>参数说明：</p>
<blockquote>
① str - 必须，字符型，提示冒泡语句<br>
② target - 可选，字符型，缺省时定义子元素的冒泡语，参数值为<mark>'svg'</mark>时定义SVG自己的冒泡语<br><br>
* 为svg子元素创建提示语时，titile() 指令会自动生成g标签且重新组织元素代码
</blockquote>
<p>下面的svg空空荡荡，不过，当鼠标指针移到它那里会有一个提示语，根据提示可以在上面做点什么：</p>
<svg id="svg1" width="760" height="400"></svg>
<p>实现上述提示语功能的代码就是 <span class="tRed"><title></span> 标签，至于点击画圆在JS里并不复杂，下面是 svgdr 实现代码：</p>
<div id="div1"><pre id="pre1">
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);
};
</pre></div>
<p>代码中第一行 title() 指令生成的SVG代码如下：</p>
<div id="div2"><pre id="pre2"></pre></div>
<p>可以看到，SVG使用一个 <span class="tRed"><title></span> 标签来实现svg画布的提示语冒泡功能。svg子元素的提示语也需要title标签，下例是在上例基础上添加子元素即圆的提示语，提示语的内容是圆的序号，画完圆之后鼠标指针停留一小会儿或随后再将鼠标指针移动到圆的上面都可以看到提示语效果：</p>
<svg id="svg2" width="760" height="400"></svg>
<p>以下是 svgdr 绘制代码：</p>
<div id="div3"><pre id="pre3">
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() 指令第二个参数空表示设定子元素提示语
};
</pre></div>
<p>以任意一个圆为例，所生成的SVG代码是这样：</p>
<div id="div4"><pre id="pre4">
<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>
</pre></div>
<p>注意比较基于svg画布和基于svg子元素的title的组织方式。SVG窗体的冒泡提示语，title标签写在svg标签的下一行，其子元素如果需要提示语，title标签放在子元素代码的上一行，它们都要放到g标签里面。</p>
<p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
<!--p><a href="/art/bshow.php?st=7&sd=7&art=mahei_1730435960" targete="_blank">返回目录</a></p-->
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr1 = draw.dr('svg1');
dr1.title('单击SVG窗体生成圆','svg');
svg1.onclick = (e) => {
var x = e.offsetX,
y = e.offsetY,
r = Math.random() * 30 + 10,
color = `#${Math.random().toString(16).substring(2, 8)}`;
dr1.circle(x,y,r,color);
};
pre2.textContent = dr1.code(svg1);
var dr2 = draw.dr('svg2')
var c_idx = 0;
dr2.title('单击SVG窗体生成圆','svg');
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)}`;
dr2.circle(x,y,r,color).title('圆' + c_idx);
};
hl.hl(div1, pre1);
hl.hl(div2, pre2);
hl.hl(div3, pre3);
hl.hl(div4, pre4);
</script>
谢谢老师对代码的详细讲解。学习了！{:4_190:} 这个好玩，先没去管代码，噼里啪啦点了一堆随机大小和色彩的圆，这些圆好漂亮{:4_173:} 冒泡提示语，这个说法好玩，实际就是鼠标悬浮时出现的提示语吧。叫悬浮提示语多好。
黑黑还把这些提示语落到了实处，点击就有10到40范围内大小的小圆出现，还是随机色。{:4_199:} 这个帖子能学习到提示语的设置方式，还学习到了任意位置画随机色图案的方法，在后面一个例子中还学习了自增序号的提示语，这些都可以在svgdr中简单实现，通过比较，可以省了g分组了呢{:4_187:} svgdr 黑黑自创的svg封装，让svg的使用变得更简单，做成这个封装太不容易了。
而且黑黑封装里的内容都做了详细讲解，这个更是辛苦了{:4_199:} 通过这些封装的学习，还能顺路复习和学习svg知识，真心不错呢{:4_187:} 我点击没有提示语出来，是冬雨不会？{:4_203:} 冬天的雨 发表于 2024-11-21 16:25
我点击没有提示语出来，是冬雨不会？
点击没有，移动到窗口有，第二个svg移动到画的圆也有 梦江南 发表于 2024-11-21 15:26
谢谢老师对代码的详细讲解。学习了！
{:4_190:} 红影 发表于 2024-11-21 15:51
通过这些封装的学习，还能顺路复习和学习svg知识，真心不错呢
{:4_190:} 红影 发表于 2024-11-21 15:50
svgdr 黑黑自创的svg封装，让svg的使用变得更简单，做成这个封装太不容易了。
而且黑黑封装里的内容都做了 ...
{:4_191:} 红影 发表于 2024-11-21 15:38
这个好玩，先没去管代码，噼里啪啦点了一堆随机大小和色彩的圆，这些圆好漂亮
圆应该是漂亮的图案之一，因为世界上不存在纯粹的圆 红影 发表于 2024-11-21 15:41
冒泡提示语，这个说法好玩，实际就是鼠标悬浮时出现的提示语吧。叫悬浮提示语多好。
黑黑还把这些提示语落 ...
官方说法是冒泡语 红影 发表于 2024-11-21 15:48
这个帖子能学习到提示语的设置方式，还学习到了任意位置画随机色图案的方法，在后面一个例子中还学习了自增 ...
{:4_190:} 这个提示语标签的之前有见过，
原来官方叫冒泡，听着有点童趣也平易近人，
趣味性更强，没那么术语。。 画的圆还可以有子冒泡，
也是好玩，它还给记住是第几个画的。。。
这个功能挺实用，感觉在哪里可以用用~~{:4_173:} 随机色好看，像巧克力一样不知道下一个是什么味道。。{:4_170:} 花飞飞 发表于 2024-11-21 19:40
随机色好看，像巧克力一样不知道下一个是什么味道。。
好像都有点甜 花飞飞 发表于 2024-11-21 19:40
画的圆还可以有子冒泡，
也是好玩，它还给记住是第几个画的。。。
这个功能挺实用，感觉在哪里可以用用~~ ...
哪里？