<set>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The<set>SVG element provides a method of 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. For attributes that can be reasonably be interpolated, the<animate> is usually preferred.

Note:The<set> element is non-additive. Theadditive andaccumulate attributes are not allowed, and will be ignored if specified.

Usage context

Categories	Animation element
Permitted content	Any number of the following elements, in any order: Descriptive elements

Attributes

to: This attribute defines the value to be applied to the target attribute for the duration of the animation. The value must match the requirements of the target attribute.Value type:<anything>;Default value: none;Animatable:no

DOM Interface

This element implements theSVGSetElement interface.

Example

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">  <style>    rect {      cursor: pointer;    }    .round {      rx: 5px;      fill: green;    }  </style>  <rect width="10" height="10">    <set attributeName="class" to="round" begin="me.click" dur="2s" />  </rect></svg>