<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SVG实现的动画场景 海啸小岛棕榈树和小女孩</title>
<style>
body {
margin: 0
}
</style>
</head>
<body>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator:9va-0.2.7 (9va-pi) https://www.d1.dion.ne.jp/~danjiro/9va/pi.html -->
<svg xmlns:xlink="https://www.w3.org/1999/xlink" image-rendering="optimizeSpeed" baseProfile="basic" version="1.1" xmlns="https://www.w3.org/2000/svg" id="island01.svg" viewBox="0 0 512 384">
<defs>
<linearGradient id="LGp1_1a8">
<stop style="stop-color:#666699;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#001f3f;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp1_2a8">
<stop style="stop-color:#a3a3a3;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#006699;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp1_3a8">
<stop style="stop-color:#996600;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#001f3f;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp1_4a8">
<stop style="stop-color:#996600;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#663300;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp1_5a8">
<stop style="stop-color:#666600;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#003300;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp1_14a8">
<stop style="stop-color:#ff9966;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#cc6600;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp1_15a8">
<stop style="stop-color:#cc9900;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#cc6600;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp1_23a8">
<stop style="stop-color:#669900;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#999933;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp2_1a8">
<stop style="stop-color:#666699;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#001f3f;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LAp2_1a8">
<stop offset="0" style="stop-color:#666699;stop-opacity:1.00;">
<set fill="freeze" begin="Sa.begin" attributeName="stop-color" to="#666699" />
<set fill="freeze" begin="Sa.begin" attributeName="stop-opacity" to="1.00" />
</stop>
<stop offset="1" style="stop-color:#001f3f;stop-opacity:1.00;">
<set fill="freeze" begin="Sa.begin" attributeName="stop-color" to="#001f3f" />
<set fill="freeze" begin="Sa.begin" attributeName="stop-opacity" to="1.00" />
<animate fill="freeze" begin="Sa.begin+3.5s" dur="2s" attributeName="stop-color" from="#001f3f" to="#000626" />
<animate fill="freeze" begin="Sa.begin+5.5s" dur="1.75s" attributeName="stop-color" from="#000626" to="#001f3f" />
</stop>
</linearGradient>
<linearGradient id="LGp2_2a8">
<stop style="stop-color:#a3a3a3;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#006699;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LAp2_2a8">
<stop offset="0" style="stop-color:#a3a3a3;stop-opacity:1.00;">
<set fill="freeze" begin="Sa.begin" attributeName="stop-color" to="#a3a3a3" />
<set fill="freeze" begin="Sa.begin" attributeName="stop-opacity" to="1.00" />
<animate fill="freeze" begin="Sa.begin+1.25s" dur="2.25s" attributeName="stop-color" from="#a3a3a3" to="#bababa" />
<animate fill="freeze" begin="Sa.begin+3.5s" dur="2s" attributeName="stop-color" from="#bababa" to="#2f2f2f" />
<animate fill="freeze" begin="Sa.begin+5.5s" dur="1.75s" attributeName="stop-color" from="#2f2f2f" to="#a3a3a3" />
</stop>
<stop offset="1" style="stop-color:#006699;stop-opacity:1.00;">
<set fill="freeze" begin="Sa.begin" attributeName="stop-color" to="#006699" />
<set fill="freeze" begin="Sa.begin" attributeName="stop-opacity" to="1.00" />
</stop>
</linearGradient>
<linearGradient id="LGp2_3a8">
<stop style="stop-color:#996600;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#663300;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LAp2_3a8">
<stop offset="0" style="stop-color:#996600;stop-opacity:1.00;">
<set fill="freeze" begin="Sa.begin" attributeName="stop-color" to="#996600" />
<set fill="freeze" begin="Sa.begin" attributeName="stop-opacity" to="1.00" />
</stop>
<stop offset="1" style="stop-color:#663300;stop-opacity:1.00;">
<set fill="freeze" begin="Sa.begin" attributeName="stop-color" to="#663300" />
<set fill="freeze" begin="Sa.begin" attributeName="stop-opacity" to="1.00" />
<animate fill="freeze" begin="Sa.begin+1.25s" dur="2.25s" attributeName="stop-color" from="#663300" to="#001f3f" />
</stop>
</linearGradient>
<linearGradient id="LGp2_5a8">
<stop style="stop-color:#666600;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#003300;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp2_14a8">
<stop style="stop-color:#ff9966;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#cc6600;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp2_15a8">
<stop style="stop-color:#cc9900;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#cc6600;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp2_23a8">
<stop style="stop-color:#669900;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#999933;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LGp3_2a8">
<stop style="stop-color:#a3a3a3;stop-opacity:1.00;" offset="0" />
<stop style="stop-color:#006699;stop-opacity:1.00;" offset="1" />
</linearGradient>
<linearGradient id="LAp3_2a8">
<stop offset="0" style="stop-opacity:1.00;">
<set fill="freeze" begin="Sa.begin+1.25s" attributeName="stop-opacity" to="1.00" />
<animate fill="freeze" begin="Sa.begin+1.25s" dur="2.25s" attributeName="stop-color" from="#a3a3a3" to="#bababa" />
<animate fill="freeze" begin="Sa.begin+3.5s" dur="2s" attributeName="stop-color" from="#bababa" to="#2f2f2f" />
<animate fill="freeze" begin="Sa.begin+5.5s" dur="1.75s" attributeName="stop-color" from="#2f2f2f" to="#a3a3a3" />
</stop>
<stop offset="1" style="stop-color:#006699;stop-opacity:1.00;">
<set fill="freeze" begin="Sa.begin+1.25s" attributeName="stop-color" to="#006699" />
<set fill="freeze" begin="Sa.begin+1.25s" attributeName="stop-opacity" to="1.00" />
</stop>
</linearGradient>
<linea
