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>
    

效果如下：

鼠标指针移至上面的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>
    

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