Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 13   

13.6 Attributwerte veraendern - set

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>
      



index  |  Kapitel 13  |  13.5  <<  | 13.6 |  >>  13.7   Bewegung entlang eines Pfades - animateMotion