by
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
by 属性は、アニメーション中に変化する属性の相対的なオフセット値を指定します。
この属性の初期値は、attributeName または from 属性の値として指定することで示されます。
この属性は、以下の SVG 要素で使用することができます。
例
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100">
<animate attributeName="width" fill="freeze" by="50" dur="3s" />
</rect>
</svg>
使用上のメモ
| 値 | 下記参照 |
|---|---|
| デフォルト値 | なし |
| アニメーション | 不可 |
この属性の具体的なデータ型は、アニメーションの対象となる属性の値によって異なります。
values 属性を使用して値のリストが定義されている場合、by 属性は無視されます。
仕様書
| Specification |
|---|
| SVG Animations Level 2 # ByAttribute |