Simple examples
| Complete code: |
Example |
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
>
<ellipse id="E" cx="90" cy="90" rx="30" ry="40" fill="#448">
<animate attributeName="rx" dur="5s" values="20;90;20" repeatCount="indefinite"/>
<animate attributeName="ry" dur="5s" values="30;60;30" repeatCount="indefinite"/>
</ellipse>
</svg>
|
|
| Alternatively,
you may point your browser at the same example, here: http://cs.sru.edu/~ddailey/svg/animoval0.svg |
The attributes in this example control the following:
attributeName — selects
which attribute or variable of the object will be animated.
dur — a
measure (by default in seconds) that determines how long the animation
will last.
values — a
semicolon-delimitted list of attribute values. These are often numeric,
but need not be. In this case there are three values with the starting
and ending values the same. This means that the animation will start
and stop with the same value.
repeatCount — for
animations that are to loop continually, "indefinite" is the choice.
Otherwise, we could put a positive integer here indicating that we will
repeat the animation a specified number of times.
Just to give you a bit more exposure to the basic concepts,
let's try another. We'll duplicate the ellipse from above and shift its
position a bit. Then let's vary the values attribute of the second
ellipse so that as one ellipse expands the other contracts. I've added
a rectangle (with rounded corners) and applied a bit of transparency to
the example for fun.
|
|
|
<rect
x="100" y="85" rx="12" height="30" width="150" fill="purple"
stroke="black" stroke-width="3" />
<ellipse cx="100" cy="100" rx="30" ry="40" fill="#448"
opacity=".75" stroke="black" stroke-width="3">
<animate attributeName="rx"
dur="5s" values="10;70;10" repeatCount="indefinite"/>
<animate attributeName="ry"
dur="5s" values="30;60;30" repeatCount="indefinite"/>
</ellipse>
<ellipse cx="250" cy="100" rx="30" ry="40" fill="#448"
opacity=".75" stroke="black" stroke-width="3">
<animate attributeName="rx"
dur="5s" values="70;10;70" repeatCount="indefinite"/>
<animate attributeName="ry"
dur="5s" values="60;30;60" repeatCount="indefinite"/>
</ellipse> |
SVG also has an <animateColor> tag intended for
colors to be gradually changed. However, SVG also gives the ability to
animate non-numeric values, and I have yet to see an example
where< animateColor> is needed where simple
<animate> with color names will not suffice.* Code such
as the following is used to vary the fill of an ellipse concurrently
with some of its other attributes.
example
varying colors
<ellipse cx="250" cy="100" rx="30" ry="40" fill="#448"
opacity=".75" stroke="black" stroke-width="3">
<animate
attributeName="rx"
dur="5s" values="70;10;70" repeatCount="indefinite"/>
<animate attributeName="ry"
dur="5s" values="60;30;60" repeatCount="indefinite"/>
<animate
attributeName="fill" dur="5s" repeatCount="indefinite"
values="red;mediumvioletred;yellowgreen;red" />
</ellipse>
