Skip to content
Related Articles

Related Articles

Improve Article
SVG <set> Element
  • Last Updated : 15 Oct, 2020

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" 
         xmlns="http://www.w3.org/2000/svg">
        <rect id="me" width="10" height="10">
            <set attributeName="fill" to="green" />
          </rect>
    </svg>
</body>
  
</html>

Output:

Example 2:




<!DOCTYPE html>
<html>
  
<body>
    <svg width="400" height="200"
        xmlns="http://www.w3.org/2000/svg">
        <a>
            <text x="50" y="90" text-anchor="middle">
                Click Here
            </text>
            <set attributeName="href" 
                 to="https://youtu.be/Abwl8g65BLQ" />
        </a>
    </svg>
</body>
  
</html>

Output:

Supported Browsers:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Internet Explorer
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :