keyPoints
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月.
keyPoints 属性は、[0,1] の範囲内で、keyTimes に含まれるそれぞれの値に対応する、オブジェクトがパス上のどの位置にあるかを示します。
この属性は、以下の SVG 要素で使用することができます。
例
html
<svg
viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path
d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey"
stroke-width="2"
fill="none"
id="motionPath" />
<circle cx="10" cy="110" r="3" fill="lightgrey" />
<circle cx="110" cy="10" r="3" fill="lightgrey" />
<circle r="5" fill="red">
<animateMotion
dur="3s"
repeatCount="indefinite"
keyPoints="0;0.5;1"
keyTimes="0;0.15;1"
calcMode="linear">
<mpath href="#motionPath" />
</animateMotion>
</circle>
</svg>
使用上のメモ
<number> [; <number>] ;?-
この値は、0 から 1 までの浮動小数点値をセミコロンで区切ったリストを定義し、対応する
keyTimes値で指定された時点において、オブジェクトがモーションパス上のどの位置まで移動すべきかを示します。距離は、path属性で指定されたパスに沿って計算されます。リスト内のそれぞれの進行値は、keyTimes属性リスト内の値に対応しています。キーポイントのリストを指定する場合、
keyPointsリストには、keyTimesリストに含まれる値の数と同じ数の値がなければなりません。値の末尾にセミコロンがあり、その後に任意で空白が続いた場合、セミコロンと末尾の空白はどちらも無視されます。
値の仕様にエラーがあった場合（つまり、不正な値、値の数が多すぎる、またはいくつかしかないなど）、それはエラーとなります。
仕様書
| Specification |
|---|
| SVG Animations Level 2 # KeyPointsAttribute |