1054412 - JavaScript-generated SVG textpaths rendered incorrectly

Status: RESOLVED INVALID

Description

[Jeroen Delcour]

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36

Steps to reproduce:

Generate a simple SVG textpath using JavaScript like so:

var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
svg.setAttributeNS(null, "viewBox", "0 0 1000 1000");
svg.id = "clockSVG";
document.body.appendChild(svg);

var defs = document.createElement('defs');
defs.id = "defs";
svg.appendChild(defs);

var path = document.createElementNS(svgNS,"path");
path.setAttribute("d","M75,20 l100,0 l100,30 q0,100 150,100");
path.setAttribute("id","myTextPath2");
defs.appendChild(path);

var text = document.createElementNS(svgNS,"text");
text.setAttribute("x","10");
text.setAttribute("y","100");
text.setAttribute("fill","black");
svg.appendChild(text);

var textPath = document.createElementNS(svgNS,"textPath");
textPath.setAttributeNS(xlinkNS, "xlink:href", "#myTextPath2");
textPath.textContent = "Text along a more advanced path with lines and curves.";
text.appendChild(textPath);
svg.appendChild(text);


Actual results:

The text is displayed in the upperleft corner of the page, partly out of view. Callin text.getBBox() shows an x-value of 0 and a negative y-value:
SVGRect { x: 0, y: -14.825797080993652, width: 355.164306640625, height: 18.532245635986328 }


Expected results:

The text should render at the correct co-ordinates and follow the linked path.

Comment 1

[Alice0775 White]

It works if you use
var defs = document.createElementNS(svgNS,'defs');

Comment 2

[Robert Longson [:longsonr]]

good spot Alice.