D3 Examples - Polling SVG TEXT and TSPAN width

xxxxxxxxxx
 
<!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>
&lt;svg width="150" height="150"&gt;
    &lt;text id="test1" y="50"&gt;test1&lt;/text&gt;
    &lt;text id="test2" y="100"&gt;
        &lt;tspan id="test3"&gt;test3&lt;/tspan&gt; 
    &lt;/text&gt;
    &lt;tspan id="test4"&gt;test4&lt;/tspan&gt;
&lt;/svg&gt;
</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>
    