javascript - 将标题悬停在 SVG 圆上

Question

使用 snapsvg.io，我想知道是否可以像使用 <img> 一样向 SVG 圆圈添加标题。将鼠标悬停在图像上但在 SVG 圆圈上时标记？

使用来自 snapsvg.io 网站的一些示例代码:

var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});

如何在这个 bigCircle 上实现悬停标题以显示一些标题文本？我想用纯 JavaScript 来完成。

Answer 1

您可以只创建圆圈的标题子项。没有快照标题创建器，但您可以使用 Snap.parse 在本地创建一个。

var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});

var title = Snap.parse('<title>This is a title</title>');
bigCircle.append(title);

html, body, svg {
  width: 100%;
  height: 100%;
}

<script src="http://svg.dabbles.info/snap.svg.js"></script>
<svg id="svg"></svg>