3

を使用してこれまで機能していた特定のパスをたどるように、長方形をアニメーション化したかったのanimateMotionです。これは私が持っているものです：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
   <rect height="40" width="40" style="fill:#777; stroke:none;"/>
   <animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/>
</g>
<path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/>

今私の質問：長方形の中心（20 20）が常にパス上にある状態で、長方形をパス（すでに達成されている）に従わせるにはどうすればよいですか？これはSVGが提供する手段で達成できますか？

4

1 に答える 1

3

確かに、rectに変換を追加するだけです。

html, body, svg {
  height: 100%;
  width: 100%;
}
<svg>
    <g>
       <rect transform="translate(-20,-20)" height="40" width="40" style="fill:#777; stroke:none;"/>
       <animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/>
    </g>
    <path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/>
</svg>

平行移動は、長方形の原点を0,0から長方形の中心に移動するように機能します。

于 2012-11-08T08:19:12.123 に答える