将标题悬停在 SVG 圆圈上答案

【问题标题】：Hover title over an SVG circle将标题悬停在 SVG 圆圈上
【发布时间】：2016-09-29 03:22:06
【问题描述】：

使用 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 来做这件事。

【问题讨论】：

标签： javascript svg snap.svg

【解决方案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 元素。是否可以就 SVG 图像以及如何均匀地（分层）添加多个圆圈以使它们不重叠并停留在特定区域内问您一个特定的问题。不确定如何确定/开发？
请随时就该主题提出其他问题。
会的，但今晚晚些时候会继续讨论。谢谢罗伯特。