svg分组title信息的实现

马黑黑

HTML元素基本都有 title 属性，它直接写在标签里面，例如：

        <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>
    

效果如下：

span

鼠标指针移至上面的div元素和span元素，都会弹出相应 tiptop 信息，就是 title 属性里写的内容。

但是，svg 按上述方式给它写 title 属性无效，它需要这么写：

        <svg>
            <title>我是SVG<title>
        </svg>
    

这个 title 以 svg 的子标签的形式书写，它仅针对 svg 标签本身。而 svg 可以拥有诸多的子元素，我们如何给这些子元素也一一加上 title 属性是个问题。方法是有的：通过分组实现。试看如下代码：

        <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>
    

效果（鼠标指针移到各个元素看看）：

红影

HTML可以用div 来标注，也可以用span
svg里是直接用title ，嗯，记下了

红影

这个 tiptop 信息是自动的带边框的白底黑字，都不用设置

马黑黑

红影 发表于 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
是这么个意思。这么简单的一个知识点，网上竟然很难找到。

黑黑觉得简单，别人不一定有所涉猎啊。

马黑黑

红影 发表于 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
白底黑字是标配

对，这个是标准的，所以特别习惯。