W3cubDocs

/SVG

<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. The additive and accumulate 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 the SVGSetElement interface.

Example

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      cursor: pointer;
    }
    .round {
      rx: 5px;
      fill: green;
    }
  </style>

  <rect id="me" width="10" height="10">
    <set attributeName="class" to="round" begin="me.click" dur="2s" />
  </rect>
</svg>

Specifications

Specification
SVG Animations Level 2> # SetElement>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`set`	2	12	4	≤12.1	3	18	4	≤12.1	1	1.0	4.4	1
`fill`	2	79	4	15	3	18	4	14	2	1.0	4.4	2
`href`	50	12	51	37	12.1	50	51	37	12.2	5.0	50	12.2
`systemLanguage`	2	79	12	≤12.1	3	18	14	≤12.1	1	1.0	4.4	1
`to`	2	12	4	≤12.1	3	18	4	≤12.1	1	1.0	4.4	1