Skip to content

Instantly share code, notes, and snippets.

@nomeaning777

nomeaning777/index.html

Created September 4, 2020 08:18
Show Gist options
  • Save nomeaning777/e456b08298c44a317b75612a5068b7eb to your computer and use it in GitHub Desktop.
Save nomeaning777/e456b08298c44a317b75612a5068b7eb to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin tspan getBoundingClientRect // source https://jsbin.com/humuroj
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="tspan getBoundingClientRect">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
SVG
<svg viewBox="0 0 320 240" style="width: 320px; height: 240px">
<text fill="black" x="100" y="100">
<tspan id="a1">M1</tspan>
<tspan id="a2">M2</tspan>
<tspan id="a3">M3</tspan>
</text>
</svg>
<button>Get the position of 3 tspans</button>
<pre id="log"></pre>
<script id="jsbin-javascript">
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function() {
var elems = [
document.querySelector('#a1'),
document.querySelector('#a2'),
document.querySelector('#a3')
];
var log = "";
for (var i = 0; i < 3; i++) {
log += "(" + elems[i].getBoundingClientRect().top + "," + elems[i].getBoundingClientRect().left + ")\n";
}
document.getElementById("log").textContent = log;
});
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function() {
var elems = [
document.querySelector('#a1'),
document.querySelector('#a2'),
document.querySelector('#a3')
];
var log = "";
for (var i = 0; i < 3; i++) {
log += "(" + elems[i].getBoundingClientRect().top + "," + elems[i].getBoundingClientRect().left + ")\n";
}
document.getElementById("log").textContent = log;
});
});</script></body>
</html>
Raw
jsbin.humuroj.js
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function() {
var elems = [
document.querySelector('#a1'),
document.querySelector('#a2'),
document.querySelector('#a3')
];
var log = "";
for (var i = 0; i < 3; i++) {
log += "(" + elems[i].getBoundingClientRect().top + "," + elems[i].getBoundingClientRect().left + ")\n";
}
document.getElementById("log").textContent = log;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment