SVG实例--小球下坡滚动

今天在学习SVG的时候，做了一个小球滚动的例子，从中可以学到一些SVG基础知识。

先贴上代码，一会分析：

<svg width="500" height="500">
            <path d="M20 20L390 390" stroke="yellow" stroke-width="2" fill="none"></path>
            <circle cx="0" cy="0" r="10" fill="blue">
                <animateMotion
                        path="M20 20L390 390"
                        dur="5s"
                        begin="1s"
                        fill="remove"
                        rotate="auto"

                >
                </animateMotion>
            </circle>
 </svg>

<path> 元素用于定义一个路径。

下面的命令可用于路径数据：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

• 路径动画：可以让某一元素沿着某一路径运动，使用animateMotion标签
• 注意点：
  path属性：指定元素按照哪一路径执行。path中的M起点是相对于直线位置的。
  rotate=“auto”:是动画沿着路径自动旋转