Skip to content

Instantly share code, notes, and snippets.

@MSCAU

MSCAU/index.html

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save MSCAU/58bba77cdcae42fc2f44 to your computer and use it in GitHub Desktop.
Save MSCAU/58bba77cdcae42fc2f44 to your computer and use it in GitHub Desktop.
Download ZIP
Polling SVG TEXT and TSPAN width
Raw
index.html
<!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>
@MSCAU
Copy link
Author

MSCAU commented May 10, 2014

Manipulating text in SVG is not easy, especially when you don't know the correct Javascript syntax. Text doesn't wrap natively in SVG so it's essentially to understand how to poll string widths to workaround this limitation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment