SVG Animations & Paths part 1

HTML Fundamentals
HTML5
SVG Animations & Paths
17
1/2
     

Shape Animations



SVG animations can be created using the <animate> element. 

The example below creates a rectangle that will change its position in 3 seconds and will then repeat the animation twice:
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>Try It Yourself

attributeName: Specifies which attribute will be affected by the animation
from: Specifies the starting value of the attribute
to: Specifies the ending value of the attribute
dur: Specifies how long the animation runs (duration)
fill: Specifies whether or not the attribute's value should return to its initial value when the animation is finished (Values: "remove" resets the value; "freeze" keeps the “to value”)
repeatCount: Specifies the repeat count of the animation

In the example above, the rectangle changes its x attribute from 0 to 300 in 3 seconds.
To repeat the animation indefinitely, use the value "indefinite" for the repeatCount attribute.

Comments

Post a Comment

Popular posts from this blog

Drag&Drop API

Making Elements Draggable The drag and drop feature lets you "grab" an object and drag it to a different location. To make an element draggable, just set the  draggable  attribute to true: <img draggable =" true " /> Any HTML element can be draggable. The API for HTML5 drag and drop is event-based. Example: <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="box" ondrop ="drop(event)" ondragover ="allowDrop(event)" style="border:1px solid black; width:200px; height:200px"></div> <img id="image" src="sample...
Read more