Is it possible to determine the width of an SVG text element before the text element is 'rendered'?
In other words, I typically will build an SVG chart off the DOM like this:
var frag = document.createDocumentFragment();
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
frag.appendChild(text);
text.textContent = "Lorem Ipsum"
...
svg.appendChild(frag);
In this example - I'd often like to know the width of the text element before the documentFragment is added to the DOM, since the position of subsequent elements may depend on it.
If I use this method:
var bbox = textElement.getBBox();
var width = bbox.width;
var height = bbox.height;
... then the height and width return 0 unless I check AFTER the documentFragment has been added to the DOM.
So, is this possible?
I've considered using a "sizer" element - a hidden element that's already in the DOM; I could set it's text then capture it's width.
But my concern is performance - if I have to measure 300 text elements this way, then each time the sizer's text is changed, do I cause a browser repaint?
Or, put another way - is there a way that I can update the textContent of that text element without causing a browser repaint (e.g., by making that element hidden, or using portion:absolute and positioning it outside the viewport?
Thanks in advance!
