mozilla
Your Search Results

    animateMotion

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

    使用可能な場所

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

    それと最大で1つの <mpath> 要素を配置。
    標準文書 SVG 1.1 (2nd Edition)

    ソースコード 出力結果
    <?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"  />
    
        <!-- Here is a 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>

    » animateMotion.svg

    属性

    グローバル属性

    専用属性

    DOM インターフェース

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

    関連情報

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

    Contributors to this page: teoli, manzyun
    最終更新者: teoli,