D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
MSCAU
Full window
Github gist
Polling SVG TEXT and TSPAN width
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { font-family: sans-serif; font-size: 0.7em; } pre { position: absolute; top: 0px; left: 180px; font-size: 1.3em; } svg { shape-rendering: crispEdges; border: 3px solid black; } table { border-collapse: collapse; } th, td { padding: 2px; } td:nth-child(3) { text-align: right; } text { font-size: 2em; } </style> </head> <body> <svg width="150" height="150"> <text id="test1" y="50">test1</text> <text id="test2" y="100"> <tspan id="test3">test3</tspan> </text> <tspan id="test4">test4</tspan> </svg> <pre> <svg width="150" height="150"> <text id="test1" y="50">test1</text> <text id="test2" y="100"> <tspan id="test3">test3</tspan> </text> <tspan id="test4">test4</tspan> </svg> </pre> <p></p> <table border="1"> <tr> <th>id</th><th>Code</th><th>Result</th><th>Note</th> </tr> <tr> <td>test1</td><td>document.getElementById("test1").getBBox().width</td><td id="result1a"></td><td>Integer in Chrome; Float in IE and Firefox.</td> </tr> <tr> <td>test2</td><td>document.getElementById("test2").getBBox().width</td><td id="result2a"></td><td>Integer in Chrome; Float in IE and Firefox.</td> </tr> <tr> <td>test3</td><td>document.getElementById("test3").getBBox().width</td><td id="result3a"></td><td>IE and Firefox can't get the BBox of a TSPAN and error out.</td> </tr> <tr> <td>test4</td><td>document.getElementById("test4").getBBox().width</td><td id="result4a"></td><td>IE and Firefox can't get the BBox of a TSPAN whether it's inside a TEXT or not.</td> </tr> <tr><td colspan="4"></td></tr> <tr> <td>test1</td><td>document.getElementById("test1").getBoundingClientRect().width</td><td id="result1b"></td><td>Integer in IE, Chrome and Safari. Same width as "test2" in Chrome eventhough 1 is narrower than 2.</td> </tr> <tr> <td>test2</td><td>document.getElementById("test2").getBoundingClientRect().width</td><td id="result2b"></td><td>Integer in IE, Chrome and Safari. Same width as "test1" in Chrome eventhough 2 is wider than 1.</td> </tr> <tr> <td>test3</td><td>document.getElementById("test3").getBoundingClientRect().width</td><td id="result3b"></td><td>Integer in Chrome and Safari.</td> </tr> <tr> <td>test4</td><td>document.getElementById("test4").getBoundingClientRect().width</td><td id="result4b"></td><td>Integer in Chrome and Safari.</td> </tr> <tr><td colspan="4"></td></tr> <tr> <td>test1</td><td>document.getElementById("test1").getComputedTextLength()</td><td id="result1c"></td><td>Integer in Chrome; Float in IE and Firefox.</td> </tr> <tr> <td>test2</td><td>document.getElementById("test2").getComputedTextLength()</td><td id="result2c"></td><td>Integer in Chrome; Float in IE and Firefox.</td> </tr> <tr> <td>test3</td><td>document.getElementById("test3").getComputedTextLength()</td><td id="result3c"></td><td>Integer in Chrome; Float in IE and Firefox.</td> </tr> <tr> <td>test4</td><td>document.getElementById("test4").getComputedTextLength()</td><td id="result4c"></td><td>A TSPAN which is not in a TEXT has no width</td> </tr> </table> <script> document.body.onload = function () { document.getElementById("result1a").innerHTML = document.getElementById("test1").getBBox().width; document.getElementById("result2a").innerHTML = document.getElementById("test2").getBBox().width; try { document.getElementById("result3a").innerHTML = document.getElementById("test3").getBBox().width; } catch(e) { document.getElementById("result3a").innerHTML = e.message; } try { document.getElementById("result4a").innerHTML = document.getElementById("test4").getBBox().width; } catch(e) { document.getElementById("result4a").innerHTML = e.message; } document.getElementById("result1b").innerHTML = document.getElementById("test1").getBoundingClientRect().width; document.getElementById("result2b").innerHTML = document.getElementById("test2").getBoundingClientRect().width; document.getElementById("result3b").innerHTML = document.getElementById("test3").getBoundingClientRect().width; document.getElementById("result4b").innerHTML = document.getElementById("test4").getBoundingClientRect().width; document.getElementById("result1c").innerHTML = document.getElementById("test1").getComputedTextLength(); document.getElementById("result2c").innerHTML = document.getElementById("test2").getComputedTextLength(); document.getElementById("result3c").innerHTML = document.getElementById("test3").getComputedTextLength(); document.getElementById("result4c").innerHTML = document.getElementById("test4").getComputedTextLength(); } </script> </body> </html>