SVG <set> Element
Last Updated :
16 Jun, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The SVG <set> element provides an easy means of just setting the value of an attribute for a specified duration. It supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values.
Syntax:
<set attributeName="" value="" />
Attribute:
- to: This attribute defines the value to be applied to the target attribute for the duration of the animation.
- Animation Attributes: Attributes used to give animation effects, exp timing attributes, event attributes, and value attributes, etc.
- Global Attributes: some global attributes used like core attributes and styling attributes, etc.
Example 1:
html
<!DOCTYPE html>
< html >
< body >
< svg viewBox="0 0 40 40"
< rect id="me" width="10" height="10">
< set attributeName="fill" to="green" />
</ rect >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
html
<!DOCTYPE html>
< html >
< body >
< svg width="400" height="200"
< a >
< text x="50" y="90" text-anchor="middle">
Click Here
</ text >
< set attributeName="href"
</ a >
</ svg >
</ body >
</ html >
|
Output:
Supported Browsers:
- Chrome 1 and above
- Edge 79 and above
- Firefox 4 and above
- Safari 3 and above
- Opera 12.1 and above
- Internet Explorer not supported
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...