Hover-Titel über einen SVG-Kreis

Question

Mit snapsvg.io möchte ich wissen, ob es möglich ist, einen Titel zu einem SVG-Kreis wie Sie mit dem <img> Tag hinzufügen, wenn Sie über das Bild, aber auf einem SVG-Kreis bewegen.

mit einigen Beispiel-Code von snapsvg.io Website:

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

Wäre wirklich zu schätzen jede Hilfe, wie ein Hover-Titel über diese bigCircle zu erreichen einige Titeltext angezeigt werden soll.

Darüber hinaus will dies in einfachen Javascript zu tun, keine jQuery danke.

Danke.

Answer 1

Sie könnten einfach ein Titelkind des Kreises erstellen. Es gibt keinen Snap-Titel-Ersteller, aber Sie können Snap.parse verwenden, um einen nativen Creator zu erstellen.

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>