-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
69 lines (50 loc) · 1.86 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
---
title: <set>
slug: Web/SVG/Element/set
page-type: svg-element
browser-compat: svg.elements.set
---
{{SVGRef}}
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 {{SVGElement('animate')}} is usually preferred.
> [!NOTE]
> The `<set>` element is non-additive. The {{SVGAttr('additive')}} and {{SVGAttr('accumulate')}} attributes are not allowed, and will be ignored if specified.
## Example
```css hidden
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 id="me" width="10" height="10">
<set attributeName="class" to="round" begin="me.click" dur="2s" />
</rect>
</svg>
```
{{EmbedLiveSample('Example', 150, '100%')}}
## Attributes
- {{SVGAttr("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>**](/en-US/docs/Web/SVG/Content_type#anything); _Default value_: none; _Animatable_: **no**
## Usage context
{{svginfo}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{SVGAttr("attributeName")}} attribute
- [Animation timing attributes](/en-US/docs/Web/SVG/Attribute#animation_timing_attributes), including {{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, and {{SVGAttr("fill")}}.
- {{SVGElement("animate")}}