将标题悬停在 SVG 圆上

Question

使用 snapsvg.io，我想知道当悬停在图像上但在 SVG 圆上时，是否可以像使用 <img> 标签那样向 SVG 圆添加标题？

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

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

如何在这个大圆圈上实现悬停标题以显示一些标题文本？我想以简单的方式 JavaScript.

Answer 1

您可以只为圈子创建一个标题 child。没有快照标题创建器，但您可以使用 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>

将标题悬停在 SVG 圆上

Hover title over an SVG circle

javascript

svg

snap.svg