-- 作者：卷积内核
-- 发布时间：8/20/2004 5:24:00 PM
-- sunset SVG动画
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="500" style="fill:rgb(0,0,255)">
<defs>
<!-- Set up the various element to be used --> <radialGradient id="stars">
<stop offset="0" style="stop-color:white;"/>
<stop offset="80%" style="stop-color: black;"/>
</radialGradient> <g id="cloud">
<circle cx="50" cy="50" r="25" style="fill:white"/>
<circle cx="30" cy="40" r="25" style="fill:white"/>
<circle cx="70" cy="30" r="25" style="fill:white"/>
<circle cx="100" cy="40" r="25" style="fill:white"/>
<circle cx="90" cy="50" r="25" style="fill:white"/>
</g> <g id="house">
<rect x="0" y="0" width="50" height="50" style="fill:brown"/>
<rect x="5" y="5" width="15" height="15" style="fill:white">
<animateColor attributeName="fill" from="white" to="yellow" dur="3s" begin="15s" fill="freeze"/>
</rect>
<rect x="30" y="5" width="15" height="15" style="fill:white">
<animateColor attributeName="fill" from="white" to="yellow" dur="3s" begin="15s" fill="freeze"/>
</rect>
<rect x="5" y="28" width="15" height="15" style="fill:white">
<animateColor attributeName="fill" from="white" to="yellow" dur="3s" begin="15s" fill="freeze"/>
</rect>
<rect x="30" y="28" width="15" height="22" style="fill:yellow">
<animateColor attributeName="fill" from="white" to="yellow" dur="3s" begin="15s" fill="freeze"/>
</rect>
</g>
<g id="star">
<circle cx="5" cy="5" r="5" style = "fill: url(#stars);"/>
</g>
</defs>
<!-- Draw the background -->
<rect id="sky" x="0" y="0" width="500" height="400" style="fill:cyan"/>
<circle id="sun" cx="300" cy="100" r="50" style="fill:yellow"/>
<circle id="moon" cx="200" cy="100" r="50" style="fill:white; opacity:0"/>
<rect id="ground" x="0" y="400" width="500" height="100" style="fill:green"/>
<!-- Draw the clouds -->
<g id="cloudGroup">
<use id="cloud1" xlink:href="#cloud" x="0" y="0"/>
<use id="cloud2" xlink:href="#cloud" x="200" y="200"/>
<use id="cloud3" xlink:href="#cloud" x="50" y="150"/>
</g>
<!-- Draw the houses -->
<use id="house1" xlink:href="#house" x="50" y="350" />
<use id="house1" xlink:href="#house" x="50" y="350" />
<use id="house1" xlink:href="#house" x="150" y="350" />
<use id="house1" xlink:href="#house" x="300" y="350" />
<use id="house1" xlink:href="#house" x="400" y="350" />
<!-- Draw the Stars -->
<g id="starsGroup" style="opacity:0;">
<use id="star1" xlink:href="#star" x="50" y="20" />
<use id="star2" xlink:href="#star" x="150" y="40" />
<use id="star3" xlink:href="#star" x="350" y="50" />
<use id="star4" xlink:href="#star" x="300" y="100" />
<use id="star5" xlink:href="#star" x="320" y="220" />
<use id="star6" xlink:href="#star" x="10" y="250" />
<use id="star7" xlink:href="#star" x="75" y="250" />
<use id="star8" xlink:href="#star" x="350" y="150" />
<use id="star9" xlink:href="#star" x="250" y="180" />
<use id="star10" xlink:href="#star" x="350" y="40" />
<use id="star11" xlink:href="#star" x="50" y="180" />
<use id="star12" xlink:href="#star" x="270" y="160" />
<use id="star13" xlink:href="#star" x="420" y="270" />
<use id="star14" xlink:href="#star" x="20" y="120" />
<use id="star15" xlink:href="#star" x="55" y="240" />
<use id="star16" xlink:href="#star" x="150" y="200" />
</g>
<!-- Animate the sunset -->
<animate id = "sunset" xlink:href="#sun"
attributeName="cy"
from="100"
to="450"
begin="00:00:00"
dur="17s"
fill="freeze"/>
<!-- Animate the clouds drifting -->
<animate id = "cloud1move" xlink:href="#cloud1"
attributeName="x"
from="0"
to="500"
begin="00:00:00"
dur="20s"
fill="freeze"/>
<animate id = "cloud2move" xlink:href="#cloud2"
attributeName="x"
from="200"
to="300"
begin="00:00:00"
dur="20s"
fill="freeze"/>
<animate id = "cloud3move" xlink:href="#cloud3"
attributeName="x"
from="50"
to="0"
begin="00:00:00"
dur="20s"
fill="freeze"/>
<!-- Animate the sky Darkening as the sun sets, first to orange, then to black -->
<animate id = "skyDarken" xlink:href="#sky"
attributeName="fill"
from="cyan"
to="orange"
begin="12"
dur="3s"
fill="freeze"/>
<animate id = "skyDarken2" xlink:href="#sky"
attributeName="fill"
from="orange"
to="black"
begin="15"
dur="3s"
fill="freeze"/>
<!-- As the sky darkens, fade the moon in -->
<animate id = "moonrise" xlink:href="#moon"
attributeName="opacity"
from="0"
to="1"
begin="15"
dur="3s"
fill="freeze"/>
<!-- fade the clouds out -->
<animate id = "cloudfade" xlink:href="#cloudGroup"
attributeName="opacity"
from="1"
to="0"
begin="15"
dur="3s"
fill="freeze"/>
<!-- fade the clouds out -->
<animate id = "starsFadeIn" xlink:href="#starsGroup"
attributeName="opacity"
from="0"
to="1"
begin="18"
dur="3s"
fill="freeze"/>
</svg>
|