请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
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>
效果(鼠标指针移到各个元素看看):
|