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

概要

<animateMotion>要素のmpath サブ要素は、外部の <path>要素をモーションパスの定義として参照する機能を提供します。

利用可能な場所

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

<svg width="100%" height="100%"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />

  <!-- Draw the outline of the motion path in blue, along
          with three small circles at the start, middle and end. -->
  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06"  />
  <circle cx="100" cy="250" r="17.64" fill="blue"  />
  <circle cx="250" cy="100" r="17.64" fill="blue"  />
  <circle cx="400" cy="250" r="17.64" fill="blue"  />

  <!-- Here is a triangle which will be moved about the motion path.
       It is defined with an upright orientation with the base of
       the triangle centered horizontally just above the origin. -->
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
       <mpath xlink:href="#path1"/>
    </animateMotion>
  </path>
</svg>

出力結果:

属性

グローバル属性

専用属性

DOM インターフェイス

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

仕様

Specification Status Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<mpath> の定義
勧告 Initial definition

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート ? ? ? ? ?
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

See also

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

このページの貢献者: Sebastianz, tkuro11
最終更新者: Sebastianz,