|
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<title>Transformationsanimationen</title>
<defs>
<path fill="#FFFF00" stroke="#FFBB00"
stroke-width="3" id="stern"
d="M 150 105 l 28 -50 l -58 0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"/>
<g id="Auge">
<path d="M100 100 a 7
12 0 1 1 10 0 a 20 20 0 0 0 -10 0" fill="white" stroke="#FFBB00"/>
<path d="M102 99 a 3 10
0 1 1 6 0 a 20 20 0 0 0 -6 0" fill="black" stroke="black"/>
</g>
</defs>
<rect x="0" y="0" width="300"
height="300" fill="#000044">
<animateColor attributeName="fill"
attributeType="XML"
from="#000044" to="#AAAAFF"
begin="4s" dur="4s"
fill="freeze" />
</rect>
<g id="Mond" transform="translate(70
120)">
<g>
<circle cx="0" cy="0"
r="60" fill="#FFFF00" stroke="#FFBB00"
stroke-width="3"/>
<use xlink:href="#Auge" transform="rotate(-10)
translate(-120 -110) "/>
<use xlink:href="#Auge" transform="rotate(10)
translate(90 -110) "/>
<path d="M -40 20 c 20 4 20 20 40
20 c 20 0 20 -16 40 -20 c -10 2 -70 2 -80 0" fill="black"
stroke="#FFBB00" />
<animateMotion dur="4s" begin="4s"
fill="freeze"
calcMode="spline"
keySplines="1 0 .8 .8"
path="M 0 0 c 120 -100 300
250 300 300"/>
<animateTransform
dur="4s" begin="4s" fill="freeze"
attributeName="transform"
attributeType="XML"
type="scale"
keyTimes="0;0.6;1" values="1;0.8;0.3"/>
</g>
</g>
<path fill="#FFFF00" stroke="#FFBB00"
stroke-width="3"
d="M 150 105 l 28 -50 l -58
0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
transform="translate(240
230) scale(0.2) ">
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="0s" dur="1s"
fill="remove"/>
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="3s" dur="1s"
fill="remove"/>
</path>
<path fill="#FFFF00" stroke="#FFBB00"
stroke-width="3"
d="M 150 105 l 28 -50 l -58
0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
transform="translate(70 240)
scale(0.2) ">
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="1s" dur="1s"
fill="remove"/>
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="4s" dur="1s"
fill="remove"/>
</path>
<path fill="#FFFF00" stroke="#FFBB00"
stroke-width="3"
d="M 150 105 l 28 -50 l -58
0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
transform="translate(220
100) scale(0.1) ">
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="0.5s" dur="1s"
fill="remove"/>
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="1s" dur="1s"
fill="remove"/>
</path>
<path fill="#FFFF00" stroke="#FFBB00"
stroke-width="3"
d="M 150 105 l 28 -50 l -58
0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
transform="translate(250
20) scale(0.1) ">
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="0.8s" dur="1s"
fill="remove"/>
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="2.8s" dur="1s"
fill="remove"/>
</path>
<use xlink:href="#stern" transform="translate(260
80) scale(0.08) "/>
<use xlink:href="#stern" transform="translate(10
250) scale(0.1) "/>
<use xlink:href="#stern" transform="translate(240
180) scale(0.1) "/>
<use xlink:href="#stern" transform="translate(150
200) scale(0.3) "/>
</svg>
|
|
