JavaScript-generated SVG textpaths rendered incorrectly

RESOLVED INVALID

Status

()

Core
SVG
RESOLVED INVALID
3 years ago
3 years ago

People

(Reporter: Jeroen Delcour, Unassigned)

Tracking

31 Branch
x86_64
Windows 8.1
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
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

3 years ago
It works if you use
var defs = document.createElementNS(svgNS,'defs');
good spot Alice.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.