<set>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das <set>
SVG-Element bietet eine Methode, um den Wert eines Attributs für eine bestimmte Dauer festzulegen.
Es unterstützt alle Attributtypen, einschließlich solcher, die nicht sinnvoll interpoliert werden können, wie Zeichenfolgen und boolesche Werte. Für Attribute, die sinnvoll interpoliert werden können, wird normalerweise das <animate>
bevorzugt.
Hinweis:
Das <set>
-Element ist nicht additiv. Die Attribute additive
und accumulate
sind nicht erlaubt und werden ignoriert, falls sie angegeben werden.
Beispiel
<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>
Attribute
to
-
Dieses Attribut definiert den Wert, der dem Zielattribut für die Dauer der Animation zugewiesen wird. Der Wert muss den Anforderungen des Zielattributs entsprechen. Werttyp: <anything>; Standardwert: keiner; Animierbar: nein
Nutzungskontext
Kategorien | Animationselement |
---|---|
Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Beschreibende Elemente |
Spezifikationen
Specification |
---|
SVG Animations Level 2 # SetElement |
Browser-Kompatibilität
Siehe auch
attributeName
Attribut- Animationstiming-Attribute, einschließlich
begin
,dur
,end
,min
,max
,restart
,repeatCount
,repeatDur
, undfill
. <animate>