Trae写svg第二期-刘备

102 阅读3分钟

让Trae AI写一个关于刘备的svg

image.png

svg代码

<?xml version="1.0" encoding="UTF-8"?>
<svg width="800" height="1200" viewBox="0 0 800 1200" xmlns="http://www.w3.org/2000/svg">
 <!-- 动画定义 -->
 <defs>
     <!-- 左手摆动动画 -->
     <animateTransform id="leftArmSwing" attributeName="transform" type="rotate"
         values="0 300 650; 30 300 650; 0 300 650; -30 300 650; 0 300 650" dur="1s" repeatCount="indefinite" />
     <!-- 右手摆动动画 -->
     <animateTransform id="rightArmSwing" attributeName="transform" type="rotate"
         values="0 500 650; -30 500 650; 0 500 650; 30 500 650; 0 500 650" dur="1s" repeatCount="indefinite" />
 </defs>

 <!-- 背景 -->
 <rect width="800" height="1200" fill="#f5f5f5" />

 <!-- 龙袍 -->
 <path d="M 300 650 
          L 200 1000
          L 350 1100
          L 400 800
          L 450 1100
          L 600 1000
          L 500 650
          Z" fill="#FFD700" stroke="#000000" stroke-width="2" />

 <!-- 龙纹装饰 -->
 <path d="M 300 700 Q 400 750 500 700" stroke="#FF0000" stroke-width="3" fill="none" />
 <path d="M 320 800 Q 400 850 480 800" stroke="#FF0000" stroke-width="3" fill="none" />
 <path d="M 340 900 Q 400 950 460 900" stroke="#FF0000" stroke-width="3" fill="none" />

 <!-- 腰带 -->
 <path d="M 320 800 
          Q 400 850 480 800" fill="none" stroke="#8B0000" stroke-width="15" />

 <!-- 左手(奔跑姿势) -->
 <g>
     <path d="M 300 650 
              C 250 650, 200 700, 180 650
              C 160 600, 180 580, 220 600
              C 260 620, 280 630, 300 650" fill="#deb887" stroke="#000000" stroke-width="2">
         <animateTransform attributeName="transform" type="rotate"
             values="0 300 650; 30 300 650; 0 300 650; -30 300 650; 0 300 650" dur="1s" repeatCount="indefinite" />
     </path>
 </g>

 <!-- 右手(奔跑姿势) -->
 <g>
     <path d="M 500 650
              C 550 650, 600 700, 620 650
              C 640 600, 620 580, 580 600
              C 540 620, 520 630, 500 650" fill="#deb887" stroke="#000000" stroke-width="2">
         <animateTransform attributeName="transform" type="rotate"
             values="0 500 650; -30 500 650; 0 500 650; 30 500 650; 0 500 650" dur="1s" repeatCount="indefinite" />
     </path>
 </g>

 <!-- 鞋子(左) -->
 <path d="M 200 1000 L 180 1050 Q 200 1070 220 1050 Z" fill="#8B4513" stroke="#000000" stroke-width="2" />

 <!-- 鞋子(右) -->
 <path d="M 600 1000 L 580 1050 Q 600 1070 620 1050 Z" fill="#8B4513" stroke="#000000" stroke-width="2" />

 <!-- 脸部轮廓 -->
 <path d="M 400 200 
          C 320 200, 250 300, 250 400
          C 250 550, 350 650, 400 650
          C 450 650, 550 550, 550 400
          C 550 300, 480 200, 400 200" fill="#deb887" stroke="#000000" stroke-width="2" />

 <!-- 大耳 -->
 <path d="M 250 350 Q 230 400 240 450" stroke="#000000" stroke-width="2" fill="#deb887" />
 <path d="M 550 350 Q 570 400 560 450" stroke="#000000" stroke-width="2" fill="#deb887" />

 <!-- 眼睛 -->
 <ellipse cx="350" cy="350" rx="25" ry="15" fill="#000000" />
 <ellipse cx="450" cy="350" rx="25" ry="15" fill="#000000" />

 <!-- 鼻子 -->
 <path d="M 400 380 Q 380 420 400 440" stroke="#000000" stroke-width="2" fill="none" />

 <!-- 嘴巴(微笑) -->
 <path d="M 370 480 Q 400 500 430 480" stroke="#000000" stroke-width="2" fill="none" />

 <!-- 头发(飘动效果) -->
 <path d="M 250 350 
          C 250 250, 350 150, 400 150
          C 450 150, 550 250, 550 350
          C 500 200, 450 180, 400 200
          C 350 180, 300 200, 250 350" fill="#000000" />

 <!-- 皇冠 -->
 <path d="M 250 250 
          L 300 200 L 350 250 L 400 200 L 450 250 L 500 200 L 550 250
          C 500 180, 450 150, 400 150
          C 350 150, 300 180, 250 250" fill="#FFD700" stroke="#8B4513" stroke-width="3" />
 <path d="M 250 240 L 550 240" stroke="#FF0000" stroke-width="2" />
 <path d="M 250 230 L 550 230" stroke="#FF0000" stroke-width="2" />

 <!-- 装饰珠宝 -->
 <circle cx="300" cy="220" r="5" fill="#FF0000" />
 <circle cx="400" cy="220" r="5" fill="#FF0000" />
 <circle cx="500" cy="220" r="5" fill="#FF0000" />
</svg>
  1. 在SVG开头添加了 部分定义动画
  2. 将左右手臂用 标签包装
  3. 在手臂的 path 中添加了 animateTransform 动画
  4. 动画设置为1秒循环一次,无限重复
  5. 左右手臂的动画是交替的,更符合奔跑时的自然摆动