SVG 实现的小机器人

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
 <g class="layer" >
  <title>reboot</title>
   <ellipse cx="296.5" cy="260" fill="#e5e5e5" id="svg_7" rx="22.5" ry="12" stroke="#e5e5e5">
         <animate attributeName="cx" attributeType="XML"
             from="297"  to="285"
             begin="0s" dur="1s" repeatCount="indefinite"/> 
   </ellipse>
     <ellipse cx="296.5" cy="260" fill="#e5e5e5" id="svg_7" rx="22.5" ry="12" stroke="#e5e5e5">
         <animate attributeName="cx" attributeType="XML"
             from="285"  to="297"
             begin="0s" dur="1s" repeatCount="indefinite"/> 
   </ellipse>
   <animateMotion
                path="M390,100 L10,100"
                begin="0s" dur="10s" repeatCount="indefinite"/> 


  <g class="Layer head" id="head">
   <title>head</title>
   <ellipse cx="303" cy="112" fill="#ffc700" id="svg_2" rx="14" ry="11" stroke="none" stroke-width="2"/>
  </g>
  <g class="Layer body" id="body">
   <title>body</title>
   <ellipse cx="303" cy="160" fill="#ffc700" id="svg_1" rx="9" ry="38" stroke="none" stroke-width="2"/>
  </g>
  <!-- right leg-->
  <g class="Layer leg right" id="leg-right">
     <animateTransform attributeName="transform"
                    type="rotate"
                    from="-20 302 200" to="55 302 200"
                    begin="0s" dur="1s"
                    repeatCount="indefinite"
          />  
   <g class="Layer leg t" id="leg-t">
    <title>leg</title>
    <ellipse cx="302" cy="200" fill="#ffc700" id="svg_8" rx="4" ry="6" stroke="none" stroke-width="2"/>
   </g>
   <g class="Layer leg h" id="leg-h">
    <title>leg</title>
    <ellipse cx="302" cy="213" fill="#ffc700" id="svg_3" rx="4" ry="12" stroke="none" stroke-width="2"/>
   </g>
   <g calss="Layer leg b" id="leg-b">
      <animateTransform attributeName="transform"
                    type="rotate"
                    from="0 302 227" to="-55 302 227"
                    begin="0s" dur="1s"
                    repeatCount="indefinite"/> 
   <g class="Layer leg m" id="leg-m">
    <title>leg</title>
    <ellipse cx="302" cy="227" fill="#ffc700" id="svg_6" rx="5" ry="6" stroke="none" stroke-width="2"/>
   </g>
   <g class="Layer leg l" id="leg-l">
    <title>leg</title>
    <ellipse cx="302" cy="244.5" fill="#ffc700" id="svg_4" rx="4" ry="17.5" stroke="none" stroke-width="2"/>
   </g>
   <g class="Layer leg f" id="leg-f">
    <title>leg</title>
    <ellipse cx="297" cy="259" fill="#ffc700" id="svg_12" rx="10" ry="5" stroke="none" stroke-width="2"/>
   </g>
   </g>
  </g>
  <!-- left leg-->
  <g class="Layer leg right" id="leg-left">
     <animateTransform attributeName="transform"
                    type="rotate"
                    from="55 302 200" to="-20 302 200"
                    begin="0s" dur="1s"
                    repeatCount="indefinite"
          />  
       <g class="Layer leg t" id="leg-t">
    <title>leg</title>
    <ellipse cx="302" cy="200" fill="#ffc700" id="svg_8" rx="4" ry="6" stroke="none" stroke-width="2"/>
   </g>
   <g class="Layer leg h" id="leg-h">
    <title>leg</title>
    <ellipse cx="302" cy="213" fill="#ffc700" id="svg_3" rx="4" ry="12" stroke="none" stroke-width="2"/>
   </g>
   <g class="layer leg b" id="leg-b">
        <animateTransform attributeName="transform"
                    type="rotate"
                    from="-55 302 227" to="0 302 227"
                    begin="0s" dur="1s"
                    repeatCount="indefinite"/>
   <g class="Layer leg m" id="leg-m">
    <title>leg</title>
    <ellipse cx="302" cy="227" fill="#ffc700" id="svg_6" rx="5" ry="6" stroke="none" stroke-width="2"/>
   </g>
   <g class="Layer leg l" id="leg-l">
    <title>leg</title>
    <ellipse cx="302" cy="244.5" fill="#ffc700" id="svg_4" rx="4" ry="17.5" stroke="none" stroke-width="2"/>
   </g>
   <g class="Layer leg f" id="leg-f">
    <title>leg</title>
    <ellipse cx="297" cy="259" fill="#ffc700" id="svg_12" rx="10" ry="5" stroke="none" stroke-width="2"/>
   </g>
   </g>
  </g>
  <g class="Layer arm left" id="arm-left">
      <animateTransform attributeName="transform"
                    type="rotate"
                    from="90 303 141" to="130 303 141"
                    begin="0s" dur="1s"
                    repeatCount="indefinite"/>
   <g class="Layer arm t" id="arm-t">
    <title>leg</title>
    <ellipse cx="303" cy="141" fill="#ffc700" id="svg_17" rx="4" ry="4" stroke="#f4efef" stroke-width="2"/>
   </g>
   <g class="Layer arm h" id="arm-h">
    <title>arm</title>
    <ellipse cx="314" cy="142" fill="#ffc700" id="svg_20" rx="10" ry="4" stroke="none" stroke-width="2"/>
   </g>
   <g>
      <animateTransform attributeName="transform"
                    type="rotate"
                    from="80 329 142.5" to="90 329 142.5"
                    begin="0s" dur="1s"
                    repeatCount="indefinite"/>   
   <g class="Layer arm m" id="arm-m">
    <title>arm</title>
    <ellipse cx="329" cy="142.5" fill="#ffc700" id="svg_24" rx="4" ry="3.5" stroke="none" stroke-width="2"/>
   </g>
   <g class="Layer arm l" id="arm-l">
    <title>arm</title>
    <ellipse cx="348.33333" cy="142" fill="#ffc700" id="svg_26" rx="4" ry="13" stroke="none" stroke-width="2" transform="matrix(0 -0.75 1 0 205 403.25)"/>
   </g>
   </g>
  </g>
     
     <g class="Layer arm right" id="arm-right">
      <animateTransform attributeName="transform"
                    type="rotate"
                    from="130 303 141" to="90 303 141"
                    begin="0s" dur="1s"
                    repeatCount="indefinite"/>
   <g class="Layer arm t" id="arm-t">
    <title>leg</title>
    <ellipse cx="303" cy="141" fill="#ffc700" id="svg_17" rx="4" ry="4" stroke="#f4efef" stroke-width="2"/>
   </g>
   <g class="Layer arm h" id="arm-h">
    <title>arm</title>
    <ellipse cx="314" cy="142" fill="#ffc700" id="svg_20" rx="10" ry="4" stroke="none" stroke-width="2"/>
   </g>
   <g>
      <animateTransform attributeName="transform"
                    type="rotate"
                    from="80 329 142.5" to="90 329 142.5"
                    begin="0s" dur="1s"
                    repeatCount="indefinite"/>   
   <g class="Layer arm m" id="arm-m">
    <title>arm</title>
    <ellipse cx="329" cy="142.5" fill="#ffc700" id="svg_24" rx="4" ry="3.5" stroke="none" stroke-width="2"/>
   </g>
   <g class="Layer arm l" id="arm-l">
    <title>arm</title>
    <ellipse cx="348.33333" cy="142" fill="#ffc700" id="svg_26" rx="4" ry="13" stroke="none" stroke-width="2" transform="matrix(0 -0.75 1 0 205 403.25)"/>
   </g>
   </g>
  </g>    
 </g>
</svg>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值