SVG <set> Element
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:
<!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 > |
chevron_right
filter_none
Output:
Example 2:
<!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 > |
chevron_right
filter_none
Output:
Supported Browsers:
- Chrome
- Edge
- Firefox
- Safari
- Internet Explorer
- Opera