animateMotion

ジャンプ先:
  1. 使用可能な場所
  2. 属性
  3. DOM インターフェース
  4. 例
  5. 仕様
  6. ブラウザ互換性
  7. 関連情報

この翻訳は不完全です。英語から この記事を翻訳 してください。

animateMotion 要素は、元となる要素を参照しモーションパスに沿って移動します。

使用可能な場所

カテゴリーアニメーション要素
許可された内容任意の数、任意の順で以下の要素を配置可能：
説明的要素
<mpath>

属性

グローバル属性

専用属性

DOM インターフェース

この要素は SVGAnimateMotionElement インターフェースを提供します。

例

SVG

<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- Draw the outline of the motion path in grey, along
       with 2 small circles at key points -->
  <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="theMotionPath"/>
  <circle cx="10" cy="110" r="3" fill="lightgrey"  />
  <circle cx="110" cy="10" r="3" fill="lightgrey"  />

  <!-- Red circle which will be moved along the motion path. -->
  <circle cx="" cy="" r="5" fill="red">

    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite">
      <mpath xlink:href="#theMotionPath"/>
    </animateMotion>
  </circle>
</svg>

結果

仕様

仕様 ステータス コメント
SVG Animations Level 2
<animateMotion> の定義		 編集者草案 変更なし
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<animateMotion> の定義		 勧告 初回定義

ブラウザ互換性

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり ? あり なし あり ?
calcMode ? ? ? ? ? ?
path ? ? ? ? ? ?
keyPoints ? ? ? ? ? ?
rotate ? ? ? ? ? ?
origin ? ? ? ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? ? ? ? ? ?
calcMode ? ? ? ? ? ? ?
path ? ? ? ? ? ? ?
keyPoints ? ? ? ? ? ? ?
rotate ? ? ? ? ? ? ?
origin ? ? ? ? ? ? ?

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: 8845musign, Sebastianz, teoli, manzyun
最終更新者: 8845musign,