SVG animate Element
Complete SVG Reference
Definition and Usage
The SVG animate element is used to animate an attribute or property over time.
Example 1
This example creates a rectangle that repeatedly fade away over 5 seconds.
Copy the following code into Notepad and save
the file as "animate_1.svg". Place the file in your Web directory:
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250" style="fill:blue">
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
</svg>
|
View example
Example 2
This example animates the x, y, width, and height attributes of a rectangle
for a period of 6 seconds (making the rectangle "grow"). It will also change the
color of the rectangle with the animateColor element.
Copy the following code into Notepad and save
the file as "animate_2.svg". Place the file in your Web directory:
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect id="rec" x="300" y="100" width="300"
height="100" style="fill:lime">
<animate attributeName="x" attributeType="XML"
begin="0s" dur="6s" fill="freeze" from="300" to="0"/>
<animate attributeName="y" attributeType="XML"
begin="0s" dur="6s" fill="freeze" from="100" to="0"/>
<animate attributeName="width" attributeType="XML"
begin="0s" dur="6s" fill="freeze" from="300" to="800"/>
<animate attributeName="height" attributeType="XML"
begin="0s" dur="6s" fill="freeze" from="100" to="300"/>
<animateColor attributeName="fill" attributeType="CSS"
from="lime" to="red" begin="2s" dur="4s" fill="freeze"/>
</rect>
</svg>
|
View example
Complete SVG Reference
Learn how your website performs under various load conditions
|
|
WAPT
is a load, stress and performance testing tool for websites and web-based applications.
In contrast to "800-pound gorilla" load testing tools, it is designed to minimize the learning
curve and give you an ability to create a heavy load from a regular workstation.
WAPT is able to generate up to 3000 simultaneously acting virtual users using standard hardware configuration.
Virtual users in each profile are fully customizable. Basic and NTLM authentication methods are supported.
Graphs and reports are shown in real-time at different levels of detail, thus helping to manage the testing process.
Download the free 30-day trial!
|
|