|
Mit dem Element set können Sie Eigenschafts- bzw. Attributwerte
in einem Zielelement für eine bestimmte Zeit oder für "unendlich"
verändern.
Außer den Attributen der
Gruppen animValueAttrs
(Kapitel 12.4)
und animAdditionAttrs
(Kapitel 12.5)
können alle Attribute für Animationselemente
verwendet werden.
Als zusätzliches Attribut wird im set-Element ein Attribut
to verwendet, das aber nichts mit dem gleichnamigen Attribut aus der
Attributgruppe animValueAttrs zu tun hat.
Im set-Element legen Sie mit dem Attribut
to den neuen Wert für das Zielelement fest!
Der Beginn der Veränderung wird mit dem Attribut begin
festgelegt. Die Dauer der Veränderung mit dem Attribut dur.
Wenn Sie für dur den Wert
indefinite angeben, haben Sie den Zielwert
dauerhaft verändert. Diesen Effekt können Sie auch durch Verwendung von
fill mit dem Wert freeze
erreichen.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das set-Element</title>
<desc>Zuweisung von bestimmenten Werten
für ein Attribut für eine gewisse Zeit (auch dauerhaft)</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:24px;
font-weight:bold; fill:black;}
circle {fill:url(#verlauf); stroke-width:5px;}
]]>
</style>
<radialGradient id="verlauf"
cx=".5" cy=".5" r=".5">
<stop offset="0" stop-color="limegreen" />
<stop offset="1" stop-color="white" />
</radialGradient>
</defs>
<!-- 5 Kreise, deren Radius temporär verändert wird -->
<circle id="k1" cx="40" cy="40" r="20"
style="stroke:gray" />
<set xlink:href="#k1"
attributeName="r"
begin="1" dur="3"
to="40" />
<circle id="k2" cx="210" cy="80" r="70"
style="stroke:black;" />
<set xlink:href="#k2"
attributeName="r"
begin="00:01.50" dur="2"
to="30" />
<circle id="k3" cx="140" cy="160" r="40"
style="stroke:red;" />
<set xlink:href="#k3"
attributeName="r"
begin="2" dur="2"
to="20" />
<circle id="k4" cx="60" cy="190" r="10"
style="stroke:blue;" />
<set xlink:href="#k4"
attributeName="r"
begin="3" dur="3"
to="90" />
<circle id="k5" cx="230" cy="200" r="30"
style="stroke:limegreen;" />
<set xlink:href="#k5"
attributeName="r"
begin="00:02.5" dur="3"
to="50" />
<!-- dauerhafte Veränderung der Durchsichtigkeit des Textes -->
<text id="ende" x="40" y="280"
style="opacity:0;">ENDE</text>
<set xlink:href="#ende"
attributeName="opacity"
begin="00:06.5" dur="indefinite"
to="1" />
</svg>
| 
