svg分组title信息的实现
<style>#mydiv p, #mydiv div { margin: 8px 0; }
#mydiv pre { white-space: pre-wrap; }
</style>
<div id="mydiv">
<p>
HTML元素基本都有 title 属性，它直接写在标签里面，例如：
</p>
<pre>
<div title="我是DIV标签" style="width: 300px; height: 40px; border: 1px solid gray;">
<span title="我是SPAN标签" style="display: block; width: 80px; height:100%; background: tan;">span<span>
</div>
</pre>
<p>
效果如下：
</p>
<div title="我是DIV标签" style="width: 300px; height: 40px; border: 1px solid gray;">
<span title="我是SPAN标签" style="display: block; width: 80px; height:100%; background: tan;">span<span></span></span>
</div>
<p>
鼠标指针移至上面的div元素和span元素，都会弹出相应 tiptop 信息，就是 title 属性里写的内容。
</p>
<p>
但是，svg 按上述方式给它写 title 属性无效，它需要这么写：
</p>
<pre>
<svg>
<title>我是SVG<title>
</svg>
</pre>
<p>
这个 title 以 svg 的子标签的形式书写，它仅针对 svg 标签本身。而 svg 可以拥有诸多的子元素，我们如何给这些子元素也一一加上 title 属性是个问题。方法是有的：通过分组实现。试看如下代码：
</p>
<pre>
<svg width="300" height="140" style="border: 1px solid gray;">
<title>我SVG</title>
<g>
<title>我是一个矩形</title>
<rect x="10" y="10" width="60" height="60" fill="pink" />
</g>
<g>
<title>我是一个圆</title>
<circle cx="150" cy="70" r="60" fill="purple" />
</g>
</svg>
</pre>
<p>
效果（鼠标指针移到各个元素看看）：
</p>
<svg width="300" height="140" style="border: 1px solid gray;"><title>我SVG</title><g><title>我是一个矩形</title><rect x="10" y="10" width="60" height="60" fill="pink"></rect></g><g><title>我是一个圆</title><circle cx="150" cy="70" r="60" fill="purple"></circle></g></svg>
</div>
HTML可以用div 来标注，也可以用span
svg里是直接用title ，嗯，记下了{:4_204:} 这个 tiptop 信息是自动的带边框的白底黑字，都不用设置{:4_173:} 红影 发表于 2023-8-15 22:56
这个 tiptop 信息是自动的带边框的白底黑字，都不用设置
tiptop就是酱紫的 红影 发表于 2023-8-15 22:52
HTML可以用div 来标注，也可以用span
svg里是直接用title ，嗯，记下了
关键在分组 马黑黑 发表于 2023-8-15 23:17
tiptop就是酱紫的
是啊，非常方便，无论图图底色是什么，这个显示都很清晰。 红影 发表于 2023-8-15 23:24
是啊，非常方便，无论图图底色是什么，这个显示都很清晰。
它是HTML内置的 马黑黑 发表于 2023-8-15 23:17
关键在分组
嗯，在不同的组里可以各自设置，互不干扰。 马黑黑 发表于 2023-8-15 23:26
它是HTML内置的
这个内置真好。 红影 发表于 2023-8-15 23:40
这个内置真好。
tiptop提示是一种标准 红影 发表于 2023-8-15 23:26
嗯，在不同的组里可以各自设置，互不干扰。
是这么个意思。这么简单的一个知识点，网上竟然很难找到。 马黑黑 发表于 2023-8-16 07:30
tiptop提示是一种标准
这个提示的设置真好，非常清晰。 马黑黑 发表于 2023-8-16 07:42
是这么个意思。这么简单的一个知识点，网上竟然很难找到。
黑黑觉得简单，别人不一定有所涉猎啊。{:4_173:} 红影 发表于 2023-8-16 15:25
黑黑觉得简单，别人不一定有所涉猎啊。
道理上是有需要的，毕竟svg可以做HTML难以做的的东东，web页里常会用到 红影 发表于 2023-8-16 15:24
这个提示的设置真好，非常清晰。
是的 马黑黑 发表于 2023-8-16 18:45
道理上是有需要的，毕竟svg可以做HTML难以做的的东东，web页里常会用到
关于svg的知识，黑黑之前专门介绍过的。 马黑黑 发表于 2023-8-16 18:45
是的
而且看着特别习惯。 红影 发表于 2023-8-16 21:21
而且看着特别习惯。
白底黑字是标配 红影 发表于 2023-8-16 21:20
关于svg的知识，黑黑之前专门介绍过的。
svg也是深不可测 马黑黑 发表于 2023-8-16 21:33
白底黑字是标配
对，这个是标准的，所以特别习惯。