| <!-- |
| Any copyright is dedicated to the Public Domain. |
| http://creativecommons.org/publicdomain/zero/1.0/ |
| --> |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <path id="p" d="M 100,100 h 50 v 200" fill="none" stroke="red" stroke-width="1"/> |
| <g style="font: 30px monospace"> |
| <text x="100" y="100">a</text> |
| </g> |
| <script><![CDATA[ |
| function put(s, x, y, r) { |
| var e = document.createElementNS("http://www.w3.org/2000/svg", "text"); |
| e.setAttribute("x", x); |
| e.setAttribute("y", y); |
| e.setAttribute("rotate", r); |
| e.textContent = s; |
| g.appendChild(e); |
| } |
| |
| var s = "a.b.c.d.e."; |
| var text = document.getElementsByTagName("text")[0]; |
| var g = text.parentNode; |
| var adv = text.getSubStringLength(0, 1); |
| for (var i = 1; i < s.length; i++) { |
| var x = i * adv; |
| if (x + adv / 2 < 50) { |
| put(s[i], 100 + x, 100, 0); |
| } else { |
| put(s[i], 150, 50 + x, 90); |
| } |
| } |
| |
| var lastText = document.getElementsByTagName("text")[s.length - 1]; |
| var range = document.createRange(); |
| range.setStart(text.firstChild, 1); |
| range.setEnd(lastText.firstChild, 0); |
| window.getSelection().addRange(range); |
| ]]></script> |
| </svg> |