CODEWITHSUNDEEP
javascriptsvg
Vadim Peretokin
Vadim Peretokin

Reputation: 2846

<title> element inserted into an SVG not working

I'm dynamically inserting a <title> into my group in an SVG, however its effect is not working. The element gets added at the proper location and everything, yet my group doesn't get a tooltip. The same element inserted by hand into the SVG works. How come my dynamically-inserted one isn't?

function setuptooltip() {
    var shadowlegs = document.getElementById('shadow-legs');

    var title      = document.createElement('title');
    var titletext  = document.createTextNode("Hi there and greetings!");
    title.appendChild(titletext);

    // get the first child of shadowlegs, so we can insert before it
    var firchild = shadowlegs.firstChild;

    // insert before the first child
    shadowlegs.insertBefore(title, firchild);
}

Here's the code: http://jsfiddle.net/bYjva/

Upvotes: 3

Views: 515

Answers (1)

adeneo
adeneo

Reputation: 318332

You're not creating a proper SVG element, but a DOM element, you have to do 

var title = document.createElementNS('http://www.w3.org/2000/svg', 'title');

FIDDLE

Upvotes: 5

Related Questions