Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<head>
<title>Moving sub-trees</title>
<!--
PURPOSE: This case tests moving an animated sub-tree from one SVG document
fragment to another. Different document fragments have different time
containers and so this test ensures the animation is correctly transferred
from one time container to the other.
OPERATION: Both animations contain a moving box. The first animation also
contains a circle. Both this circle and its child animation element are
removed from the first animation and added to the second animation.
EXPECTED RESULTS: The circle appears in the second box at the appropriate
offset.
-->
<script>
function move()
{
var svgs = document.getElementsByTagName('svg');
for (var i = 0; i < svgs.length; i++) {
var svg = svgs[i];
svg.pauseAnimations();
svg.setCurrentTime(1.5);
}
doMove();
setTimeout('document.documentElement.removeAttribute("class")', 0);
}
function doMove()
{
var circle = document.getElementById('circle-to-move');
circle.parentNode.removeChild(circle);
var target = document.getElementById('new-parent');
target.appendChild(circle);
}
</script>
</head>
<body onload="move()">
<rect x="0" y="0" width="199" height="199"
style="fill: none; stroke: black"/>
<g>
<!-- background rect to track progress -->
<rect x="0" y="80" width="0" height="40" fill="royalblue"
stroke="black" stroke-width="1">
<animate attributeName="width" from="0" to="200" begin="0s" dur="3s"
fill="freeze"/>
</rect>
<!-- circle to transfer -->
<circle cx="0" cy="100" r="15" fill="skyblue" stroke="black"
stroke-width="1" id="circle-to-move">
<animate attributeName="cx" from="0" to="200" begin="0s" dur="3s"
fill="freeze"/>
</circle>
</g>
</svg>
<!-- Second animation -->
<rect x="0" y="0" width="199" height="199"
style="fill: none; stroke: black"/>
<g id="new-parent">
<!-- background rect to track progress -->
<rect x="0" y="80" width="0" height="40" fill="greenyellow"
stroke="black" stroke-width="1">
<animate attributeName="width" from="0" to="200" begin="0s" dur="3s"
fill="freeze"/>
</rect>
</g>
</svg>
</body>
</html>