svg入门制作简易动画

svg的分量越来越重要了，如果你学好了svg也能在前段站住一席之地

今天主要使用svg制作一个简易的人物动画；纯手工制作，有些粗糙，主要是熟悉svg，各位看了之后可以试着画一画

<svg class="runPath" width="1100" height="420" xmlns="http://www.w3.org/2000/svg">
    <g id="man">
        <rect id="Rectangle" fill="#F4D79D" transform="rotate(0 150 19)" x="100" y="120" width="30" height="100" rx="15"/>
        <rect id="Rectangle2" fill="#595959" transform="rotate(0 150 19)" x="95" y="120" width="40" height="60" rx="10"/>
        <rect id="Rectangle1" fill="#F4D79D" transform="rotate(0 150 19)" x="100" y="120" width="30" height="100" rx="15"/>
        <rect id="Rectangle3" fill="#595959" transform="rotate(0 150 19)" x="95" y="120" width="40" height="60" rx="10"/>
        <ellipse id="cirBody" cx="120" cy="100" rx="40" ry="50" fill="#595959"/>
        <ellipse id="cirfoot" cx="115" cy="210" rx="20" ry="10" fill="#8f8f8f"/>
        <ellipse id="cirfoot1" cx="115" cy="210" rx="20" ry="10" fill="#8f8f8f"/>
        <rect id="Rectarm" fill="#F4D79D" transform="rotate(0 110 80)" x="110" y="80" width="30" height="50" rx="15"/>
        <rect id="Rectarm1" fill="#F4D79D" transform="rotate(-30 120 115)" x="105" y="110" width="30" height="50" rx="15"/>
        <ellipse id="head" cx="120" cy="35" rx="20" ry="25" fill="#F4D79D"></ellipse>
        <path id="hat" d="M100 35 C105,-5 135,-5 140,35 L150,35" stroke="black" fill="green" stroke-width="1"/>
        <path id="mouse" d="M135,45 L145,45" stroke="white" stroke-width="1"/>
        <animateMotion path="M10,80 L980,80" begin="0s" dur="24s" repeatCount="indefinite"/>
    </g>
</svg>

function addAnimation(arg){
    var rt=document.getElementById(arg.ele);
    var aT=document.createElementNS("http://www.w3.org/2000/svg","animateTransform");
    if (aT) {
        aT.setAttribute("attributeName",arg.attributeName); 
        aT.setAttribute("type",arg.type);
        aT.setAttribute("begin",arg.begin);
        aT.setAttribute("dur",arg.dur);
        aT.setAttribute("values",arg.values);
        aT.setAttribute("repeatCount",arg.repeatCount);
        rt.appendChild(aT);
    }
}
window.onload=function(){
    addAnimation({
        "ele":"Rectangle",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"-8 150 19;8 150 19;-8 150 19",
        "repeatCount":"indefinite",
    });
    addAnimation({
        "ele":"cirfoot",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"-8 150 19;8 150 19;-8 150 19",
        "repeatCount":"indefinite",
    });
    addAnimation({
        "ele":"Rectangle1",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"8 150 19;-8 150 19;8 150 19",
        "repeatCount":"indefinite",
    });
    addAnimation({
        "ele":"cirfoot1",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"8 150 19;-8 150 19;8 150 19",
        "repeatCount":"indefinite",
    });
    addAnimation({
        "ele":"Rectangle2",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"-8 150 19;8 150 19;-8 150 19",
        "repeatCount":"indefinite",
    });
    addAnimation({
        "ele":"Rectangle3",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"8 150 19;-8 150 19;8 150 19",
        "repeatCount":"indefinite",
    });
    addAnimation({
        "ele":"Rectarm1",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"-50 120 115;-30 120 115;-50 120 115",
        "repeatCount":"indefinite",
    });
    addAnimation({
        "ele":"Rectarm",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"5 110 80;0 110 80;5 110 80",
        "repeatCount":"indefinite",
    });
    addAnimation({
        "ele":"cirBody",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"5 120 110;-5 120 110;5 120 110",
        "repeatCount":"indefinite",
    });
    addAnimation({
        "ele":"head",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"5 120 110;-5 120 110;5 120 110",
        "repeatCount":"indefinite",
    });
    addAnimation({
        "ele":"hat",
        "attributeName":"transform",
        "type":"rotate",
        "begin":"0",
        "dur":"4s",
        "values":"5 120 110;-5 120 110;5 120 110",
        "repeatCount":"indefinite",
    });
}

代码略粗糙，仅供参考作用