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
});

如何在这个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>

将标题悬停在SVG圈子上

1 个答案: