SVG路径

svg其实早就有了，书籍都是几年之前的，但最近几年微信公众号里不知为什么突然使用SVG排版，有些人用这个替代了H5。

svg path定义的是一组路径，你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。path元素的形状是通过它的 d 属性决定的，d属性中通常以字母为命令。

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

<div class="container">

    <h4></h1>

    <svg width="120" height="2250" viewBox="0 0 120 2250" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

        <path d="M10,50 100,150 100,500 100,600" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"/>

        <circle r="5" fill="blue">

            <animateMotion dur="8s" repeatCount="indefinite">

                <mpath xlink:href="#theMotionPath" />

            </animateMotion>

        </circle>

    </svg>

</div>