36 lines
1.3 KiB
XML
36 lines
1.3 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
|
<defs>
|
||
|
<rect id="red" width="100" height="100" fill="red"/>
|
||
|
<rect id="green" width="100" height="100" fill="green"/>
|
||
|
</defs>
|
||
|
<use x="10" y="10" width="100" height="100">
|
||
|
<animate attributeName="xlink:href" from="#red" dur="50ms" to="#green" fill="freeze"/>
|
||
|
</use>
|
||
|
<use x="120" y="10" width="100" height="100" xlink:href="#red">
|
||
|
<animate attributeName="xlink:href" from="#red" dur="60ms" to="#green" fill="freeze"/>
|
||
|
</use>
|
||
|
<use x="230" y="10" width="100" height="100">
|
||
|
<animate attributeName="href" from="#red" dur="70ms" to="#green" fill="freeze"/>
|
||
|
</use>
|
||
|
<use x="340" y="10" width="100" height="100" href="#red">
|
||
|
<animate attributeName="href" from="#red" dur="80ms" to="#green" fill="freeze"/>
|
||
|
</use>
|
||
|
<script>
|
||
|
if (window.testRunner)
|
||
|
testRunner.waitUntilDone();
|
||
|
|
||
|
var elements = document.querySelectorAll("animate");
|
||
|
var count = elements.length;
|
||
|
|
||
|
for (var i = count; i--; )
|
||
|
elements[i].addEventListener("endEvent", endAnimate, false);
|
||
|
|
||
|
function endAnimate() {
|
||
|
if (--count === 0) {
|
||
|
if (window.testRunner)
|
||
|
testRunner.notifyDone();
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
</svg>
|