SVG path路径学习三

什么是贝塞尔曲线，详细可去维基百科-贝塞尔曲线处观看。

再次借用此图：

path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。
四次和五次或更高的贝塞尔曲线是由二次和三次结合而来。
这里有个不错的二次三次曲线呈现工具 分享给大家http://dayu.pw/svgcontrol/。
MDN的SVG教程也可以去看一下MDN-SVG。

最后送大家一个svg生成的palace的logo

代码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="280" height="240" viewBox="0 0 140 120">
    <path d="M60.3 113.9 l1.8-5.9-3.9 5.9z">path>
    <path d="M38.3 102.6 l29.8-51.9L59.6 36l-49.3 85.7H130l9.2-19.1H38.3zm8 16.6h-3.8l7.1-14.2h4.2c1.1 0 2 .1 2.5.2.5.2.9.4 1 .7.2.3.3.6.3 1.1 0 .4-.2 1.1-.6 2l-.7 1.4c-.6.9-1.2 1.3-1.7 1.8-.4.4-1 .7-1.6 1-.7.2-1.5.5-2.4.5l-1.7.1-2.6 5.4zm12.1 0l.9-2.5h-2.7l-1.5 2.5h-4.3L61.4 105H66l-3.6 14.2h-4zm20.1 0l.9-2.5h-2.7l-1.5 2.5H62.9L70 105h3.7l-5.5 11.3h4.3l-.7 1.5 9.6-12.8h4.7l-3.6 14.2h-4zm8.1.2c-1.2 0-1.5-.1-2.1-.5-.6-.4-.9-1-.8-1.7.1-.7.4-1.8 1-3.3 0 0 1-2.2 2-3.9.6-1.1 1.4-2.1 1.5-2.3.3-.5.8-1 1.5-1.5.6-.5 1.4-.8 2.2-1.1.8-.3 1.1-.3 2-.3 1.2 0 2.1.2 2.7.6.6.4.9.9.8 1.6-.1.6-.4 1.6-1.1 2.9l-.2.4h-3.5l.7-1.5c.4-.7.3-1.2.2-1.3-1.9-1.5-6.7 8.5-5.5 9.5.2.2.7.1 1.1-.2.2-.2.5-.6.9-1.4l.9-1.8h3.5l-.3.6c-.7 1.5-1.4 2.5-1.9 3.1-.5.6-1.3 1.1-2.4 1.6-.9.4-2 .5-3.2.5zm19.7-11.5h-4.5l-1.3 2.7h4.3l-1.4 2.7h-4.3l-1.6 3.1h4.8l-1.4 2.8h-8.6l7.1-14.2h8.4l-1.5 2.9z">path>
    <path d="M80.5 113.9 l1.8-5.9-3.9 5.9zM52.1 110.8c.2-.2.5-.5.9-1l.6-1.1c.2-.5.1-.7 0-.8-.1-.1-.4-.3-1.4-.4l-1.7 3.4c.5.1.6.1.7.1.4.1.7 0 .9-.2z">path>
    <g>
        <path d="M26 77.4l-4.1-4.5 3.1 6.3zM18.2 80.6c-.3-.4-.5-.4-.7-.4-.2 0-.5.2-1 1l2 3.2c.3-.4.4-.5.4-.6.2-.3.3-.6.3-.9 0-.3-.1-.7-.4-1.2l-.6-1.1zM36.3 60.1l-4.1-4.6 3 6.4z">path>
        <path d="M87.4 80.5h19.2l-47-80L0 101.9l9.4 19.2 50.2-87.4 27.8 46.8zM21.6 95.4L13 82l2.2-3.6c.6-1 1.1-1.7 1.5-2 .4-.4.8-.6 1.1-.6.3 0 .7.1 1.1.3.4.3.9.7 1.5 1.5l.8 1.3c.5 1 .5 1.8.7 2.3.1.6.1 1.2 0 1.9-.2.7-.3 1.5-.8 2.3l-.9 1.6 3.3 5.2-1.9 3.2zm8-13.6l-1.7-2.1-1.4 2.4 1.4 2.6-2.2 3.7L18.9 72l2.4-4 10.4 10.3-2.1 3.5zm10.3-17.3l-1.7-2-1.4 2.4 1.4 2.6-2.2 3.7-4 6.8-8.6-13.3 1.9-3.2L32.2 72l2.2-3.7.9 1.4-6.1-14.8 2.4-4L41.9 61l-2 3.5zm5.5-10.1c-.1 1.1-.6 2.2-1.2 3.2-.6 1.1-.8 1.2-1.5 1.6-.6.3-1.3.2-1.9-.2-.6-.4-1.4-1.3-2.3-2.6 0 0-1.3-2-2.3-3.7-.7-1.1-1.1-2.2-1.2-2.5-.3-.5-.4-1.2-.5-2-.1-.8 0-1.6.2-2.5.2-.9.2-1.1.7-1.9.6-1.1 1.3-1.7 1.9-2 .7-.3 1.3-.3 1.8.1s1.2 1.2 2 2.4l.2.3-1.8 3-.9-1.4c-.4-.7-.9-.9-1-.8-2.2.9 4 10.1 5.3 9.6.3-.1.4-.6.4-1.1 0-.3-.3-.7-.7-1.5l-1.1-1.7 1.8-3 .3.5c.9 1.4 1.5 2.5 1.7 3.2.2.9.2 1.9.1 3zm1.5-1.7l-8.6-13.3 4.3-7.2 1.7 2.7-2.3 3.8 1.6 2.5 2.2-3.7 1.6 2.5-2.2 3.7 1.9 2.9 2.4-4.1 1.7 2.7-4.3 7.5z">path>
    g>
    <g>
        <path d="M98.5 51.2l5.9-1-7-.9zM88 33l5.9-1-7-.9z">path>
        <path d="M51.5 81.8l-10.7 19.4H139.4L79.7 0H60.6l48.2 81.8H51.5zm22.8-62.4H90l2.2 3.8c.6 1 1 1.8 1.1 2.4.1.6.1 1 0 1.3-.2.3-.4.6-.8.8-.4.2-1 .4-2 .4H89c-1.1-.1-1.8-.5-2.4-.7-.6-.2-1.1-.5-1.7-1.1-.5-.5-1.2-1.1-1.7-1.9l-.9-1.5h-6.1l-1.9-3.5zm8.2 14.3l2.6-.4-1.4-2.5-2.9-.2-2.3-3.9L96 29.8l2.4 4.2-13.8 3.2-2.1-3.5zM93 51.9l2.6-.4-1.4-2.5-2.9-.2-2.1-3.6-4.3-7.5h15.7l1.9 3.3-12.5.2 2.3 3.9-1.6.1 15.9 2.9 2.4 4.2-13.8 3.2-2.2-3.6zm4 7.4c-.6-1.1-.7-1.4-.7-2.1 0-.7.4-1.2 1.1-1.5.6-.2 1.8-.5 3.3-.6 0 0 2.4-.1 4.4 0 1.3.1 2.5.3 2.7.3.6.1 1.3.3 2 .6.7.4 1.4.9 2.1 1.5.7.6.8.8 1.3 1.6.6 1.1.9 2 .9 2.8 0 .7-.3 1.2-.9 1.4-.6.2-1.6.3-3 .3h-.4l-1.8-3.2h1.6c.8 0 1.2-.2 1.2-.4.3-2.4-10.7-2.1-10.9-.7 0 .3.3.7.8.9.3.1.8.2 1.6.2h2l1.8 3.2h-.6c-1.6 0-2.8-.1-3.6-.3-.8-.2-1.7-.7-2.6-1.4-1-.6-1.7-1.5-2.3-2.6zm11.7 8.4h-3.4l2.5 4.3h-3.1l-4.5-7.8h15.7l4.4 7.6h-3.1l-2.3-4.1h-3l2.3 3.9h-3l-2.5-3.9z">path>
        <path d="M86.3 24.2c.3.1.7.3 1.3.3h1.2c.5-.1.6-.2.7-.4.1-.2 0-.5-.4-1.4h-3.7c.2.5.3.6.3.7.1.4.4.7.6.8z">path>
    g>
svg>

相当于起始点（60.3,113.9）
第二个点（60.3+1.8,113.9-5.9）
第三个点（60.3+1.8-3.9,113.9-5.9+5.9） 闭合