The SVG <set>
element provides a simple 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. For attributes that can be reasonably be interpolated, the <animate>
is usualy prefered.
Note: The <set>
element is non-additive. The additive
and accumulate
attributes are not allowed, and will be ignored if specified.
html,body,svg { height:100%; margin:0; padding:0; }
<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>
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
Animation Attributes
- Animation timing attributes
begin
,dur
,end
,min
,max
,restart
,repeatCount
,repeatDur
,fill
- Other Animation attributes
- Most notably:
attributeName
- Animation event attributes
- Most notably:
onbegin
,onend
,onrepeat
Global attributes
- Core Attributes
- Most notably:
id
- Styling Attributes
class
,style
- Event Attributes
- Global event attributes, Document element event attributes
Usage notes
Categories | Animation element |
---|---|
Permitted content | Any number of the following elements, in any order: Descriptive elements |
Specifications
Specification | Status | Comment |
---|---|---|
SVG Animations Level 2 The definition of '<set>' in that specification. |
Editor's Draft | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<set>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
set | Chrome Full support Yes | Edge Full support ≤79 | Firefox ? | IE ? | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android ? | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
to | Chrome Full support Yes | Edge Full support ≤79 | Firefox ? | IE ? | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android ? | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown