<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.

SVG の <set> 要素は、指定した時間だけ属性の値を設定するという単純な意味を提供します。

文字列や論理値など、合理的に補間できないものも含めて、すべての属性型に対応しています。合理的に補間できる属性については、通常は <animate> を推奨します。

メモ: <set> 要素は非加算です。additiveaccumulate 属性は指定することができず、指定されても無視されます。

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>

属性

to

この属性は、アニメーションの再生時間の間、対象とする属性に適用する値を定義します。値は、対象とする属性の要求と一致しなければなりません。 値の型: <anything>; 既定値: none; アニメーション: 不可

使用可能な場所

カテゴリーアニメーション要素
許可されている内容任意の数、任意の順序の以下の要素。
説明的要素

仕様書

Specification
SVG Animations Level 2
# SetElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
set
fill
href
systemLanguage
to

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報