The by attribute specifies a relative offset value for an attribute that will be modified during an animation.
Syntax:
by="numbers"
Attribute Values:
- integers: Integer at which we want to set the by attribute.
We will use the by attribute for adjusting the size of the shape.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< svg viewBox = "0 0 100 100"
< rect x = "5" y = "5" width = "20" height = "20" >
< animate attributeName = "width"
fill = "freeze" by = "20" dur = "4s" />
</ rect >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< svg viewBox = "0 0 100 100"
< rect x = "5" y = "5" width = "20" height = "10" >
< animate attributeName = "height"
fill = "freeze" by = "10" dur = "4s" />
</ rect >
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...