<svg xmlns="http://www.w3.org/2000/svg"

        xmlns:xlink="http://www.w3.org/1999/xlink"

        xmlns:xhtml="http://www.w3.org/1999/xhtml">

<script>

<![CDATA[

var stateIndex = 0;

var currentTarget = 0;

function stateA() 

{

    document.getElementById("A").textContent = '|A|';

    document.getElementById("B").textContent = 'B';

    currentTarget = 0;

    startAnimation();

}

function stateB() 

{

    document.getElementById("A").textContent = 'A';

    document.getElementById("B").textContent = '|B|';

    currentTarget = 1;

    startAnimation();

}

var intervalId = null;

function startAnimation() {

    if (intervalId == null) {

	intervalId = setInterval(animationStep, 20);

    }

}

function animationStep() {

    if (Math.abs(stateIndex - currentTarget) < .001) {

	clearInterval(intervalId);

	intervalId = null;

	return;

    }

    if (stateIndex < currentTarget) {

	stateIndex += 1 / 128;

    } else {

	stateIndex -= 1 / 128;

    }

    var elt = document.getElementById("targetGroup");

    var transform = "translate(" + (100 * stateIndex) + "," + (100 * stateIndex) + ") rotate(" + (405 * stateIndex) + ",100,250) scale(" + (1 +  stateIndex)  + ")" ;

    var opacity = 1 - .75 * stateIndex;

    elt.setAttribute("opacity", opacity);

    elt.setAttribute("transform", transform);

}

]]>

</script>

        <text id="A" x="0" y="32" fill="red" font-size="32" onclick="stateA()">|A|</text>

        <text id="B" x="60" y="32" fill="blue" font-size="32" onclick="stateB()">B</text>

        <text x="0" y="642" fill="black" font-size="32">Click B and then A above.</text>

        <text x="0" y="674" fill="black" font-size="32">The animation should have no trails or clipping.</text>

	<circle fill="pink" cx="300" cy="300" stroke="lightblue" stroke-width="40" r="300" />

        <g>

            <rect fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />

	        <image  id="targetGroup" x="60" y="60" width="170" height="170" xlink:href="resources/3dolph.gif"  />

        </g>

</svg>