diff options
Diffstat (limited to 'files/ja/web/svg/element/mpath/index.html')
| -rw-r--r-- | files/ja/web/svg/element/mpath/index.html | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/files/ja/web/svg/element/mpath/index.html b/files/ja/web/svg/element/mpath/index.html new file mode 100644 index 0000000000..00c5daa516 --- /dev/null +++ b/files/ja/web/svg/element/mpath/index.html @@ -0,0 +1,108 @@ +--- +title: <mpath> +slug: Web/SVG/Element/mpath +tags: + - SVGアニメーション + - リファレンス + - 要素 +translation_of: Web/SVG/Element/mpath +--- +<div>{{SVGRef}}</div> + +<h2 id="概要">概要</h2> + +<p>{{ SVGElement("animateMotion") }}要素のmpath サブ要素は、外部の {{ SVGElement("path") }}要素をモーションパスの定義として参照する機能を提供します。</p> + +<h2 id="利用可能な場所">利用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<pre class="brush: html"><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> +</pre> + +<p>出力結果:</p> + +<p>{{EmbedLiveSample("Example",250,165)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink attributes</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_インターフェイス">DOM インターフェイス</h2> + +<p>この要素は <code><a href="/en/DOM/SVGMPathElement" title="en/DOM/SVGMPathElement">SVGMPathElement</a></code> インターフェイスを提供します。</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#MPathElement", "<mpath>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#MPathElement", "<mpath>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + + + +<p>{{Compat("svg.elements.mpath")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{ SVGElement("animateMotion") }}</li> +</ul> |