1

Using snapsvg.io, I would like to know if it's possible to add a title to an SVG circle like you can with the <img> tag when hovering over the image but on a SVG circle?

Using some example code from snapsvg.io website:

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

How can I achieve a hover title over this bigCircle to display some title text? I'd like to do this in plain JavaScript.

halfer
  • 19,824
  • 17
  • 99
  • 186
tonyf
  • 34,479
  • 49
  • 157
  • 246

1 Answers1

2

You could just create a title child of the circle. There's no snap title creator but you can use Snap.parse to create one natively.

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>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Excellent - just want I needed. Assuming I can apply this to text as well? – tonyf May 31 '16 at 08:33
  • 1
    try it and see :-) – Robert Longson May 31 '16 at 08:35
  • All good Robert - assumed it would work. You seem to know your SVG elements very well. Would it be possible to ask you onespecific question regarding an SVG image and how to add multiple circles evenly (layered) so that they do not overlap and stay within a certain region. Unsure how to determine this/develop? – tonyf May 31 '16 at 08:45
  • Feel free to ask another question on that subject. – Robert Longson May 31 '16 at 08:47
  • Will do, but will get back onto it later on tonight. Thanks Robert. – tonyf May 31 '16 at 08:48
  • Have just posted my new question - pls see: http://stackoverflow.com/questions/37542867/how-to-calculate-a-region-of-an-svg-image-to-be-used-for-circles – tonyf May 31 '16 at 10:14