|
<?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="160" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<title>Bewegungsanimationen, Ausrichten am Pfad</title>
<defs>
<path id="bewegungspfad"
d="M 10 50 c 20 4 20 20 40 20 c 20 0 20 -16 40 -20
s 10 40 0 50 s -80 4 -80 0 s -15 -40 0 -50"/>
</defs>
<g transform="translate(10)">
<use xlink:href="#bewegungspfad" fill="none"
stroke="black"/>
<path d="M0 10 h 10 l -5 -10 z" fill="red">
<animateMotion
begin="0s" dur="6s" repeatDur="2:00"
rotate="auto">
<mpath xlink:href="#bewegungspfad"/>
</animateMotion>
</path>
</g>
<g transform="translate(150)">
<use xlink:href="#bewegungspfad" fill="none"
stroke="black"/>
<path d="M0 10 h 10 l -5 -10 z" fill="blue">
<animateMotion
begin="0s" dur="6s" repeatDur="2:00"
rotate="auto-reverse">
<mpath xlink:href="#bewegungspfad"/>
</animateMotion>
</path>
</g>
<text x="40" y="130" font-size="9pt">auto</text>
<text x="170" y="130" font-size="9pt">auto-reverse</text>
</svg>
|
|
