Playing with SVG text.

text.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="600" width="800" version="1.1" onload="init(evt)" onmouseup="endSlider()" onmousemove="doSlider(evt)">
    <script type="text/ecmascript"><![CDATA[
        (function (g) {
            var svgDocument, myPath, myText, sliderValues, currentSlider, redraw,
                arcControl, spaceControl;

            g.init = function (evt) {
                if (typeof svgDocument === 'undefined') {
                    svgDocument = evt.target.ownerDocument;
                }
                if (typeof myPath === 'undefined') {
                    myPath = svgDocument.getElementById('myPath');
                }
                if (typeof myText === 'undefined') {
                    myText = svgDocument.getElementById('myText');
                }
                if (typeof arcControl === 'undefined') {
                    arcControl = svgDocument.getElementById('arcControl');
                }
                if (typeof spaceControl === 'undefined') {
                    spaceControl = svgDocument.getElementById('spaceControl');
                }
                currentSlider = false;
                sliderValues = [300, 350];
            };

            redraw = function () {
                var points, val;

                // Fetch the points for the curve
                points = myPath.getAttributeNS(null, 'd').split(' ');

                // Adjust the Arc
                val = parseInt(((sliderValues[0] - 100.0) / 400 * 1000) - 500, 10);
                if (val > 500) val = 500;
                if (val < -500) val = (-500);
                points[5] = Math.abs(val); 
                points[8] = (val > 0) ? 0 : 1;
                myPath.setAttributeNS(null, 'd', points.join(' '));

                // Adjust the rotation
                val = parseInt(((sliderValues[1] - 50) / 600 * 360) - 180, 10);
                myPath.setAttributeNS(null, 'transform', 'rotate(' + val + ' 350 300)');
            };

            g.startSlider = function (obj) {
                g.endSlider();
                currentSlider = obj;
            };

            g.endSlider = function () {
                currentSlider = false;
            };

            g.doSlider = function (evt) {
                var posX = evt.clientX,
                    posY = evt.clientY;

                if (!currentSlider) {
                    return;
                } else {
                    objId = currentSlider.getAttributeNS(null, 'id');
                }

                if (objId == "arcControl") {
                    if (posY < 100) posY = 100;
                    if (posY > 500) posY = 500;
                    sliderValues[0] = posY;
                    arcControl.setAttributeNS(null, 'cy', posY);
                } else if (objId == "spaceControl") {
                    if (posX < 50) posX = 50;
                    if (posX > 650) posX = 650;
                    sliderValues[1] = posX;
                    spaceControl.setAttributeNS(null, 'cx', posX);
                }

                redraw();
            };
        }(this));
    ]]></script>
    <defs>
        <path id="myPath" d="M 250 300 A 200 0 0 0 1 450 300" style="stroke: gray; fill: none;"/>
    </defs>
    <rect x="0" y="0" width="800" height="600" style="fill: none; stroke: #ff0000; stroke-width: 3;"/>
    <!--
    <use xlink:href="#myPath" style="stroke: #ffff00; stroke-width: 3;" />
    -->
    <text style="font-size: 48px; text-anchor: middle;" id="myText">
        <textPath xlink:href="#myPath" startOffset="50%" method="align">Skookum</textPath>
    </text>
    <g>
        <path d="M 700 100 L 700 500" style="stroke: #000000; stroke-width: 3;" />
        <circle cx="700" cy="300" r="10" style="fill: #ff0000; stroke: #0000ff; stroke-width: 3;" id="arcControl" onmousedown="startSlider(this)" />
    </g>
    <g>
        <path d="M 50 500 L 650 500" style="stroke: #000000; stroke-width: 3;" />
        <circle cx="350" cy="500" r="10" style="fill: #ff0000; stroke: #0000ff; stroke-width: 3;" id="spaceControl" onmousedown="startSlider(this)" />
    </g>
</svg>