from
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。
from 属性は、アニメーション中に変更される属性の初期値を示します。
to 属性と組み合わせて使用すると、アニメーションは対象の属性を from の値から to の値へと変化します。by 属性と組み合わせて使用すると、アニメーションは属性を from の値から、by で指定された値分だけ相対的に変化します。
この属性は、以下の SVG 要素で使用することができます。
例
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" height="100">
<animate attributeName="width" fill="freeze" from="100" to="150" dur="3s" />
</rect>
</svg>
使用上のメモ
| 値 | 下記参照 |
|---|---|
| デフォルト値 | なし |
| アニメーション | 不可 |
この属性の具体的なデータ型は、アニメーションの対象となる属性の値によって異なります。
values 属性を使用して値のリストが定義されている場合、from 属性は無視されます。
仕様書
| 仕様書 |
|---|
| SVG Animations Level 2 # FromAttribute |