from
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月.
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 属性は無視されます。
仕様書
| Specification |
|---|
| SVG Animations Level 2 # FromAttribute |