SVG - 沿路径的动画矩形; rect的中心总是在路径上

时间:2012-11-08 02:32:24

标签: svg svg-animate

我希望为一个矩形设置动画,使其遵循到目前为止使用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提供的方法实现吗?

1 个答案:

答案 0 :(得分:3)

当然,只需在矩形中添加一个变换。

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>

translate用于将rect原点从0,0移动到矩形中心。